@fatcherjs/middleware-json

Install

$3

``bash
>$ npm install @fatcherjs/middleware-json
`

$3

`html




`

Usage

`ts
import { fatcher } from 'fatcher';
import { json } from '@fatcherjs/middleware-json';

const res = await fatcher('https://foo.bar/get', {
middlewares: [json],
progressive: {
isPlaceholder: (value) => value.startsWith('$$');
}
});

console.log(response.skeleton); // Promise Tree
console.log(response.snapshot); // Progressive Json
`

Examples

$3

`jsx
import { useState } from 'react';
import { json } from '@fatcherjs/middleware-json';
import { fatcher } from 'fatcher';
import { use, Suspense } from 'react';
function delay(ms) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, ms);
});
}

async function fetchMessage() {
const response = await fatcher('https://test.com', {
progressive: {
isPlaceholder: value => value.startsWith('$$'),
},
middlewares: [
json,
() => {
return new Response(
new ReadableStream({
async start(controller) {
controller.enqueue(new TextEncoder().encode(JSON.stringify({ userInfo: '$$1' })));
await delay(300);
controller.enqueue(
new TextEncoder().encode(
JSON.stringify({
$$1: { name: 'Alice', age: 18 },
}),
),
);
controller.close();
},
}),
);
},
],
});

return response.skeleton;
}

function UserInfo({ userInfoPromise }) {
const userInfo = use(userInfoPromise);

return userInfo ? ${userInfo.name} (${userInfo.age}) : 'loading...';
}

function Message({ skeleton }) {
const data = use(skeleton);

return (



Here is the message:{' '}
⌛Downloading UserInfo...

License

MIT