<div align="center"> <a href="https://codecov.io/github/fatcherjs/middleware-json" > <img src="https://codecov.io/github/fatcherjs/middleware-json/graph/badge.svg?token=TFKUGW6YNI"/> </a> <a href="https://www.jsdelivr.com/package/npm/@fatcherjs
npm install @fatcherjs/middleware-json``bash`
>$ npm install @fatcherjs/middleware-json
`html
`
`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
`
`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:{' '}
export default function App() {
const [skeleton, setSkeleton] = useState(null);
async function download() {
setSkeleton(fetchMessage());
}
if (!skeleton) {
return ;
}
return (