@tanstack/react-query-next-experimental 5.0.0-beta.2 → 5.0.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/HydrationStreamProvider.cjs.map +1 -1
- package/build/legacy/HydrationStreamProvider.d.cts +5 -5
- package/build/legacy/HydrationStreamProvider.d.ts +5 -5
- package/build/legacy/HydrationStreamProvider.js.map +1 -1
- package/build/modern/HydrationStreamProvider.cjs.map +1 -1
- package/build/modern/HydrationStreamProvider.d.cts +5 -5
- package/build/modern/HydrationStreamProvider.d.ts +5 -5
- package/build/modern/HydrationStreamProvider.js.map +1 -1
- package/package.json +4 -4
- package/src/HydrationStreamProvider.tsx +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: TShape
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: Array<TShape>) => void\n }\n}\n\nexport interface HydrationStreamProviderProps<TShape> {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n}\n\nexport function createHydrationStreamProvider<TShape>() {\n const context = React.createContext<HydrationStreamContext<TShape>>(\n null as any,\n )\n /**\n\n * 1. (Happens on server): `useServerInsertedHTML()` is called **on the server** whenever a `Suspense`-boundary completes\n * - This means that we might have some new entries in the cache that needs to be flushed\n * - We pass these to the client by inserting a `<script>`-tag where we do `window[id].push(serializedVersionOfCache)`\n * 2. (Happens in browser) In `useEffect()`:\n * - We check if `window[id]` is set to an array and call `push()` on all the entries which will call `onEntries()` with the new entries\n * - We replace `window[id]` with a `push()`-method that will be called whenever new entries are received\n **/\n function UseClientHydrationStreamProvider(props: {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n }) {\n // unique id for the cache provider\n const id = `__RQ${React.useId()}`\n const idJSON = JSON.stringify(id)\n\n const [transformer] = React.useState(\n () =>\n (props.transformer ?? {\n // noop\n serialize: (obj: any) => obj,\n deserialize: (obj: any) => obj,\n }) as unknown as TypedDataTransformer<TShape>,\n )\n\n // <server stuff>\n const [stream] = React.useState<Array<TShape>>(() => {\n if (typeof window !== 'undefined') {\n return {\n push() {\n // no-op on the client\n },\n } as unknown as Array<TShape>\n }\n return []\n })\n const count = React.useRef(0)\n useServerInsertedHTML(() => {\n // This only happens on the server\n stream.push(...(props.onFlush?.() ?? []))\n\n if (!stream.length) {\n return null\n }\n // console.log(`pushing ${stream.length} entries`)\n const serializedCacheArgs = stream\n .map((entry) => transformer.serialize(entry))\n .map((entry) => JSON.stringify(entry))\n .join(',')\n\n // Flush stream\n stream.length = 0\n\n const html: Array<string> = [\n `window[${idJSON}] = window[${idJSON}] || [];`,\n `window[${idJSON}].push(${serializedCacheArgs});`,\n ]\n return (\n <script\n key={count.current++}\n dangerouslySetInnerHTML={{\n __html: html.join(''),\n }}\n />\n )\n })\n // </server stuff>\n\n // <client stuff>\n const onEntriesRef = React.useRef(props.onEntries)\n React.useEffect(() => {\n onEntriesRef.current = props.onEntries\n })\n\n React.useEffect(() => {\n // Client: consume cache:\n const onEntries = (...serializedEntries: Array<Serialized<TShape>>) => {\n const entries = serializedEntries.map((serialized) =>\n transformer.deserialize(serialized),\n )\n onEntriesRef.current(entries)\n }\n\n const win = window as any\n // Register cache consumer\n const winStream: Array<Serialized<TShape>> = win[id] ?? []\n\n onEntries(...winStream)\n\n // Register our own consumer\n win[id] = {\n push: onEntries,\n }\n\n return () => {\n // Cleanup after unmount\n win[id] = []\n }\n }, [id, transformer])\n // </client stuff>\n\n return (\n <context.Provider value={{ stream, id }}>\n {props.children}\n </context.Provider>\n )\n }\n\n return {\n Provider: UseClientHydrationStreamProvider,\n context,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAAsC;AACtC,YAAuB;AAEvB,IAAM,mBAAmB,OAAO,YAAY;AA+CrC,SAAS,gCAAwC;AACtD,QAAM,UAAgB;AAAA,IACpB;AAAA,EACF;AAUA,WAAS,iCAAiC,OAiBvC;AAED,UAAM,KAAK,OAAa,YAAM,CAAC;AAC/B,UAAM,SAAS,KAAK,UAAU,EAAE;AAEhC,UAAM,CAAC,WAAW,IAAU;AAAA,MAC1B,MACG,MAAM,eAAe;AAAA;AAAA,QAEpB,WAAW,CAAC,QAAa;AAAA,QACzB,aAAa,CAAC,QAAa;AAAA,MAC7B;AAAA,IACJ;AAGA,UAAM,CAAC,MAAM,IAAU,eAAwB,MAAM;AACnD,UAAI,OAAO,WAAW,aAAa;AACjC,eAAO;AAAA,UACL,OAAO;AAAA,UAEP;AAAA,QACF;AAAA,MACF;AACA,aAAO,CAAC;AAAA,IACV,CAAC;AACD,UAAM,QAAc,aAAO,CAAC;AAC5B,iDAAsB,MAAM;AA5GhC;AA8GM,aAAO,KAAK,KAAI,WAAM,YAAN,mCAAqB,CAAC,CAAE;AAExC,UAAI,CAAC,OAAO,QAAQ;AAClB,eAAO;AAAA,MACT;AAEA,YAAM,sBAAsB,OACzB,IAAI,CAAC,UAAU,YAAY,UAAU,KAAK,CAAC,EAC3C,IAAI,CAAC,UAAU,KAAK,UAAU,KAAK,CAAC,EACpC,KAAK,GAAG;AAGX,aAAO,SAAS;AAEhB,YAAM,OAAsB;AAAA,QAC1B,UAAU,MAAM,cAAc,MAAM;AAAA,QACpC,UAAU,MAAM,UAAU,mBAAmB;AAAA,MAC/C;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,yBAAyB;AAAA,YACvB,QAAQ,KAAK,KAAK,EAAE;AAAA,UACtB;AAAA;AAAA,MACF;AAAA,IAEJ,CAAC;AAID,UAAM,eAAqB,aAAO,MAAM,SAAS;AACjD,IAAM,gBAAU,MAAM;AACpB,mBAAa,UAAU,MAAM;AAAA,IAC/B,CAAC;AAED,IAAM,gBAAU,MAAM;AAEpB,YAAM,YAAY,IAAI,sBAAiD;AACrE,cAAM,UAAU,kBAAkB;AAAA,UAAI,CAAC,eACrC,YAAY,YAAY,UAAU;AAAA,QACpC;AACA,qBAAa,QAAQ,OAAO;AAAA,MAC9B;AAEA,YAAM,MAAM;AAEZ,YAAM,YAAuC,IAAI,EAAE,KAAK,CAAC;AAEzD,gBAAU,GAAG,SAAS;AAGtB,UAAI,EAAE,IAAI;AAAA,QACR,MAAM;AAAA,MACR;AAEA,aAAO,MAAM;AAEX,YAAI,EAAE,IAAI,CAAC;AAAA,MACb;AAAA,IACF,GAAG,CAAC,IAAI,WAAW,CAAC;AAGpB,WACE,oCAAC,QAAQ,UAAR,EAAiB,OAAO,EAAE,QAAQ,GAAG,KACnC,MAAM,QACT;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA,EACF;AACF;","names":[]}
|
|
@@ -12,7 +12,7 @@ interface HydrationStreamContext<TShape> {
|
|
|
12
12
|
* Push a new entry to the stream
|
|
13
13
|
* Will be ignored on the client
|
|
14
14
|
*/
|
|
15
|
-
push: (...shape: TShape
|
|
15
|
+
push: (...shape: Array<TShape>) => void;
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
interface HydrationStreamProviderProps<TShape> {
|
|
@@ -26,12 +26,12 @@ interface HydrationStreamProviderProps<TShape> {
|
|
|
26
26
|
* **Client method**
|
|
27
27
|
* Called in the browser when new entries are received
|
|
28
28
|
*/
|
|
29
|
-
onEntries: (entries: TShape
|
|
29
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
30
30
|
/**
|
|
31
31
|
* **Server method**
|
|
32
32
|
* onFlush is called on the server when the cache is flushed
|
|
33
33
|
*/
|
|
34
|
-
onFlush?: () => TShape
|
|
34
|
+
onFlush?: () => Array<TShape>;
|
|
35
35
|
}
|
|
36
36
|
declare function createHydrationStreamProvider<TShape>(): {
|
|
37
37
|
Provider: (props: {
|
|
@@ -45,12 +45,12 @@ declare function createHydrationStreamProvider<TShape>(): {
|
|
|
45
45
|
* **Client method**
|
|
46
46
|
* Called in the browser when new entries are received
|
|
47
47
|
*/
|
|
48
|
-
onEntries: (entries: TShape
|
|
48
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
49
49
|
/**
|
|
50
50
|
* **Server method**
|
|
51
51
|
* onFlush is called on the server when the cache is flushed
|
|
52
52
|
*/
|
|
53
|
-
onFlush?: (() => TShape
|
|
53
|
+
onFlush?: (() => Array<TShape>) | undefined;
|
|
54
54
|
}) => React.JSX.Element;
|
|
55
55
|
context: React.Context<HydrationStreamContext<TShape>>;
|
|
56
56
|
};
|
|
@@ -12,7 +12,7 @@ interface HydrationStreamContext<TShape> {
|
|
|
12
12
|
* Push a new entry to the stream
|
|
13
13
|
* Will be ignored on the client
|
|
14
14
|
*/
|
|
15
|
-
push: (...shape: TShape
|
|
15
|
+
push: (...shape: Array<TShape>) => void;
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
interface HydrationStreamProviderProps<TShape> {
|
|
@@ -26,12 +26,12 @@ interface HydrationStreamProviderProps<TShape> {
|
|
|
26
26
|
* **Client method**
|
|
27
27
|
* Called in the browser when new entries are received
|
|
28
28
|
*/
|
|
29
|
-
onEntries: (entries: TShape
|
|
29
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
30
30
|
/**
|
|
31
31
|
* **Server method**
|
|
32
32
|
* onFlush is called on the server when the cache is flushed
|
|
33
33
|
*/
|
|
34
|
-
onFlush?: () => TShape
|
|
34
|
+
onFlush?: () => Array<TShape>;
|
|
35
35
|
}
|
|
36
36
|
declare function createHydrationStreamProvider<TShape>(): {
|
|
37
37
|
Provider: (props: {
|
|
@@ -45,12 +45,12 @@ declare function createHydrationStreamProvider<TShape>(): {
|
|
|
45
45
|
* **Client method**
|
|
46
46
|
* Called in the browser when new entries are received
|
|
47
47
|
*/
|
|
48
|
-
onEntries: (entries: TShape
|
|
48
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
49
49
|
/**
|
|
50
50
|
* **Server method**
|
|
51
51
|
* onFlush is called on the server when the cache is flushed
|
|
52
52
|
*/
|
|
53
|
-
onFlush?: (() => TShape
|
|
53
|
+
onFlush?: (() => Array<TShape>) | undefined;
|
|
54
54
|
}) => React.JSX.Element;
|
|
55
55
|
context: React.Context<HydrationStreamContext<TShape>>;
|
|
56
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: TShape
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: Array<TShape>) => void\n }\n}\n\nexport interface HydrationStreamProviderProps<TShape> {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n}\n\nexport function createHydrationStreamProvider<TShape>() {\n const context = React.createContext<HydrationStreamContext<TShape>>(\n null as any,\n )\n /**\n\n * 1. (Happens on server): `useServerInsertedHTML()` is called **on the server** whenever a `Suspense`-boundary completes\n * - This means that we might have some new entries in the cache that needs to be flushed\n * - We pass these to the client by inserting a `<script>`-tag where we do `window[id].push(serializedVersionOfCache)`\n * 2. (Happens in browser) In `useEffect()`:\n * - We check if `window[id]` is set to an array and call `push()` on all the entries which will call `onEntries()` with the new entries\n * - We replace `window[id]` with a `push()`-method that will be called whenever new entries are received\n **/\n function UseClientHydrationStreamProvider(props: {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n }) {\n // unique id for the cache provider\n const id = `__RQ${React.useId()}`\n const idJSON = JSON.stringify(id)\n\n const [transformer] = React.useState(\n () =>\n (props.transformer ?? {\n // noop\n serialize: (obj: any) => obj,\n deserialize: (obj: any) => obj,\n }) as unknown as TypedDataTransformer<TShape>,\n )\n\n // <server stuff>\n const [stream] = React.useState<Array<TShape>>(() => {\n if (typeof window !== 'undefined') {\n return {\n push() {\n // no-op on the client\n },\n } as unknown as Array<TShape>\n }\n return []\n })\n const count = React.useRef(0)\n useServerInsertedHTML(() => {\n // This only happens on the server\n stream.push(...(props.onFlush?.() ?? []))\n\n if (!stream.length) {\n return null\n }\n // console.log(`pushing ${stream.length} entries`)\n const serializedCacheArgs = stream\n .map((entry) => transformer.serialize(entry))\n .map((entry) => JSON.stringify(entry))\n .join(',')\n\n // Flush stream\n stream.length = 0\n\n const html: Array<string> = [\n `window[${idJSON}] = window[${idJSON}] || [];`,\n `window[${idJSON}].push(${serializedCacheArgs});`,\n ]\n return (\n <script\n key={count.current++}\n dangerouslySetInnerHTML={{\n __html: html.join(''),\n }}\n />\n )\n })\n // </server stuff>\n\n // <client stuff>\n const onEntriesRef = React.useRef(props.onEntries)\n React.useEffect(() => {\n onEntriesRef.current = props.onEntries\n })\n\n React.useEffect(() => {\n // Client: consume cache:\n const onEntries = (...serializedEntries: Array<Serialized<TShape>>) => {\n const entries = serializedEntries.map((serialized) =>\n transformer.deserialize(serialized),\n )\n onEntriesRef.current(entries)\n }\n\n const win = window as any\n // Register cache consumer\n const winStream: Array<Serialized<TShape>> = win[id] ?? []\n\n onEntries(...winStream)\n\n // Register our own consumer\n win[id] = {\n push: onEntries,\n }\n\n return () => {\n // Cleanup after unmount\n win[id] = []\n }\n }, [id, transformer])\n // </client stuff>\n\n return (\n <context.Provider value={{ stream, id }}>\n {props.children}\n </context.Provider>\n )\n }\n\n return {\n Provider: UseClientHydrationStreamProvider,\n context,\n }\n}\n"],"mappings":";;;AAEA,SAAS,6BAA6B;AACtC,YAAY,WAAW;AAEvB,IAAM,mBAAmB,OAAO,YAAY;AA+CrC,SAAS,gCAAwC;AACtD,QAAM,UAAgB;AAAA,IACpB;AAAA,EACF;AAUA,WAAS,iCAAiC,OAiBvC;AAED,UAAM,KAAK,OAAa,YAAM,CAAC;AAC/B,UAAM,SAAS,KAAK,UAAU,EAAE;AAEhC,UAAM,CAAC,WAAW,IAAU;AAAA,MAC1B,MACG,MAAM,eAAe;AAAA;AAAA,QAEpB,WAAW,CAAC,QAAa;AAAA,QACzB,aAAa,CAAC,QAAa;AAAA,MAC7B;AAAA,IACJ;AAGA,UAAM,CAAC,MAAM,IAAU,eAAwB,MAAM;AACnD,UAAI,OAAO,WAAW,aAAa;AACjC,eAAO;AAAA,UACL,OAAO;AAAA,UAEP;AAAA,QACF;AAAA,MACF;AACA,aAAO,CAAC;AAAA,IACV,CAAC;AACD,UAAM,QAAc,aAAO,CAAC;AAC5B,0BAAsB,MAAM;AA5GhC;AA8GM,aAAO,KAAK,KAAI,WAAM,YAAN,mCAAqB,CAAC,CAAE;AAExC,UAAI,CAAC,OAAO,QAAQ;AAClB,eAAO;AAAA,MACT;AAEA,YAAM,sBAAsB,OACzB,IAAI,CAAC,UAAU,YAAY,UAAU,KAAK,CAAC,EAC3C,IAAI,CAAC,UAAU,KAAK,UAAU,KAAK,CAAC,EACpC,KAAK,GAAG;AAGX,aAAO,SAAS;AAEhB,YAAM,OAAsB;AAAA,QAC1B,UAAU,MAAM,cAAc,MAAM;AAAA,QACpC,UAAU,MAAM,UAAU,mBAAmB;AAAA,MAC/C;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,yBAAyB;AAAA,YACvB,QAAQ,KAAK,KAAK,EAAE;AAAA,UACtB;AAAA;AAAA,MACF;AAAA,IAEJ,CAAC;AAID,UAAM,eAAqB,aAAO,MAAM,SAAS;AACjD,IAAM,gBAAU,MAAM;AACpB,mBAAa,UAAU,MAAM;AAAA,IAC/B,CAAC;AAED,IAAM,gBAAU,MAAM;AAEpB,YAAM,YAAY,IAAI,sBAAiD;AACrE,cAAM,UAAU,kBAAkB;AAAA,UAAI,CAAC,eACrC,YAAY,YAAY,UAAU;AAAA,QACpC;AACA,qBAAa,QAAQ,OAAO;AAAA,MAC9B;AAEA,YAAM,MAAM;AAEZ,YAAM,YAAuC,IAAI,EAAE,KAAK,CAAC;AAEzD,gBAAU,GAAG,SAAS;AAGtB,UAAI,EAAE,IAAI;AAAA,QACR,MAAM;AAAA,MACR;AAEA,aAAO,MAAM;AAEX,YAAI,EAAE,IAAI,CAAC;AAAA,MACb;AAAA,IACF,GAAG,CAAC,IAAI,WAAW,CAAC;AAGpB,WACE,oCAAC,QAAQ,UAAR,EAAiB,OAAO,EAAE,QAAQ,GAAG,KACnC,MAAM,QACT;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: TShape
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: Array<TShape>) => void\n }\n}\n\nexport interface HydrationStreamProviderProps<TShape> {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n}\n\nexport function createHydrationStreamProvider<TShape>() {\n const context = React.createContext<HydrationStreamContext<TShape>>(\n null as any,\n )\n /**\n\n * 1. (Happens on server): `useServerInsertedHTML()` is called **on the server** whenever a `Suspense`-boundary completes\n * - This means that we might have some new entries in the cache that needs to be flushed\n * - We pass these to the client by inserting a `<script>`-tag where we do `window[id].push(serializedVersionOfCache)`\n * 2. (Happens in browser) In `useEffect()`:\n * - We check if `window[id]` is set to an array and call `push()` on all the entries which will call `onEntries()` with the new entries\n * - We replace `window[id]` with a `push()`-method that will be called whenever new entries are received\n **/\n function UseClientHydrationStreamProvider(props: {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n }) {\n // unique id for the cache provider\n const id = `__RQ${React.useId()}`\n const idJSON = JSON.stringify(id)\n\n const [transformer] = React.useState(\n () =>\n (props.transformer ?? {\n // noop\n serialize: (obj: any) => obj,\n deserialize: (obj: any) => obj,\n }) as unknown as TypedDataTransformer<TShape>,\n )\n\n // <server stuff>\n const [stream] = React.useState<Array<TShape>>(() => {\n if (typeof window !== 'undefined') {\n return {\n push() {\n // no-op on the client\n },\n } as unknown as Array<TShape>\n }\n return []\n })\n const count = React.useRef(0)\n useServerInsertedHTML(() => {\n // This only happens on the server\n stream.push(...(props.onFlush?.() ?? []))\n\n if (!stream.length) {\n return null\n }\n // console.log(`pushing ${stream.length} entries`)\n const serializedCacheArgs = stream\n .map((entry) => transformer.serialize(entry))\n .map((entry) => JSON.stringify(entry))\n .join(',')\n\n // Flush stream\n stream.length = 0\n\n const html: Array<string> = [\n `window[${idJSON}] = window[${idJSON}] || [];`,\n `window[${idJSON}].push(${serializedCacheArgs});`,\n ]\n return (\n <script\n key={count.current++}\n dangerouslySetInnerHTML={{\n __html: html.join(''),\n }}\n />\n )\n })\n // </server stuff>\n\n // <client stuff>\n const onEntriesRef = React.useRef(props.onEntries)\n React.useEffect(() => {\n onEntriesRef.current = props.onEntries\n })\n\n React.useEffect(() => {\n // Client: consume cache:\n const onEntries = (...serializedEntries: Array<Serialized<TShape>>) => {\n const entries = serializedEntries.map((serialized) =>\n transformer.deserialize(serialized),\n )\n onEntriesRef.current(entries)\n }\n\n const win = window as any\n // Register cache consumer\n const winStream: Array<Serialized<TShape>> = win[id] ?? []\n\n onEntries(...winStream)\n\n // Register our own consumer\n win[id] = {\n push: onEntries,\n }\n\n return () => {\n // Cleanup after unmount\n win[id] = []\n }\n }, [id, transformer])\n // </client stuff>\n\n return (\n <context.Provider value={{ stream, id }}>\n {props.children}\n </context.Provider>\n )\n }\n\n return {\n Provider: UseClientHydrationStreamProvider,\n context,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAAsC;AACtC,YAAuB;AAEvB,IAAM,mBAAmB,OAAO,YAAY;AA+CrC,SAAS,gCAAwC;AACtD,QAAM,UAAgB;AAAA,IACpB;AAAA,EACF;AAUA,WAAS,iCAAiC,OAiBvC;AAED,UAAM,KAAK,OAAa,YAAM,CAAC;AAC/B,UAAM,SAAS,KAAK,UAAU,EAAE;AAEhC,UAAM,CAAC,WAAW,IAAU;AAAA,MAC1B,MACG,MAAM,eAAe;AAAA;AAAA,QAEpB,WAAW,CAAC,QAAa;AAAA,QACzB,aAAa,CAAC,QAAa;AAAA,MAC7B;AAAA,IACJ;AAGA,UAAM,CAAC,MAAM,IAAU,eAAwB,MAAM;AACnD,UAAI,OAAO,WAAW,aAAa;AACjC,eAAO;AAAA,UACL,OAAO;AAAA,UAEP;AAAA,QACF;AAAA,MACF;AACA,aAAO,CAAC;AAAA,IACV,CAAC;AACD,UAAM,QAAc,aAAO,CAAC;AAC5B,iDAAsB,MAAM;AAE1B,aAAO,KAAK,GAAI,MAAM,UAAU,KAAK,CAAC,CAAE;AAExC,UAAI,CAAC,OAAO,QAAQ;AAClB,eAAO;AAAA,MACT;AAEA,YAAM,sBAAsB,OACzB,IAAI,CAAC,UAAU,YAAY,UAAU,KAAK,CAAC,EAC3C,IAAI,CAAC,UAAU,KAAK,UAAU,KAAK,CAAC,EACpC,KAAK,GAAG;AAGX,aAAO,SAAS;AAEhB,YAAM,OAAsB;AAAA,QAC1B,UAAU,MAAM,cAAc,MAAM;AAAA,QACpC,UAAU,MAAM,UAAU,mBAAmB;AAAA,MAC/C;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,yBAAyB;AAAA,YACvB,QAAQ,KAAK,KAAK,EAAE;AAAA,UACtB;AAAA;AAAA,MACF;AAAA,IAEJ,CAAC;AAID,UAAM,eAAqB,aAAO,MAAM,SAAS;AACjD,IAAM,gBAAU,MAAM;AACpB,mBAAa,UAAU,MAAM;AAAA,IAC/B,CAAC;AAED,IAAM,gBAAU,MAAM;AAEpB,YAAM,YAAY,IAAI,sBAAiD;AACrE,cAAM,UAAU,kBAAkB;AAAA,UAAI,CAAC,eACrC,YAAY,YAAY,UAAU;AAAA,QACpC;AACA,qBAAa,QAAQ,OAAO;AAAA,MAC9B;AAEA,YAAM,MAAM;AAEZ,YAAM,YAAuC,IAAI,EAAE,KAAK,CAAC;AAEzD,gBAAU,GAAG,SAAS;AAGtB,UAAI,EAAE,IAAI;AAAA,QACR,MAAM;AAAA,MACR;AAEA,aAAO,MAAM;AAEX,YAAI,EAAE,IAAI,CAAC;AAAA,MACb;AAAA,IACF,GAAG,CAAC,IAAI,WAAW,CAAC;AAGpB,WACE,oCAAC,QAAQ,UAAR,EAAiB,OAAO,EAAE,QAAQ,GAAG,KACnC,MAAM,QACT;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA,EACF;AACF;","names":[]}
|
|
@@ -12,7 +12,7 @@ interface HydrationStreamContext<TShape> {
|
|
|
12
12
|
* Push a new entry to the stream
|
|
13
13
|
* Will be ignored on the client
|
|
14
14
|
*/
|
|
15
|
-
push: (...shape: TShape
|
|
15
|
+
push: (...shape: Array<TShape>) => void;
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
interface HydrationStreamProviderProps<TShape> {
|
|
@@ -26,12 +26,12 @@ interface HydrationStreamProviderProps<TShape> {
|
|
|
26
26
|
* **Client method**
|
|
27
27
|
* Called in the browser when new entries are received
|
|
28
28
|
*/
|
|
29
|
-
onEntries: (entries: TShape
|
|
29
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
30
30
|
/**
|
|
31
31
|
* **Server method**
|
|
32
32
|
* onFlush is called on the server when the cache is flushed
|
|
33
33
|
*/
|
|
34
|
-
onFlush?: () => TShape
|
|
34
|
+
onFlush?: () => Array<TShape>;
|
|
35
35
|
}
|
|
36
36
|
declare function createHydrationStreamProvider<TShape>(): {
|
|
37
37
|
Provider: (props: {
|
|
@@ -45,12 +45,12 @@ declare function createHydrationStreamProvider<TShape>(): {
|
|
|
45
45
|
* **Client method**
|
|
46
46
|
* Called in the browser when new entries are received
|
|
47
47
|
*/
|
|
48
|
-
onEntries: (entries: TShape
|
|
48
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
49
49
|
/**
|
|
50
50
|
* **Server method**
|
|
51
51
|
* onFlush is called on the server when the cache is flushed
|
|
52
52
|
*/
|
|
53
|
-
onFlush?: (() => TShape
|
|
53
|
+
onFlush?: (() => Array<TShape>) | undefined;
|
|
54
54
|
}) => React.JSX.Element;
|
|
55
55
|
context: React.Context<HydrationStreamContext<TShape>>;
|
|
56
56
|
};
|
|
@@ -12,7 +12,7 @@ interface HydrationStreamContext<TShape> {
|
|
|
12
12
|
* Push a new entry to the stream
|
|
13
13
|
* Will be ignored on the client
|
|
14
14
|
*/
|
|
15
|
-
push: (...shape: TShape
|
|
15
|
+
push: (...shape: Array<TShape>) => void;
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
interface HydrationStreamProviderProps<TShape> {
|
|
@@ -26,12 +26,12 @@ interface HydrationStreamProviderProps<TShape> {
|
|
|
26
26
|
* **Client method**
|
|
27
27
|
* Called in the browser when new entries are received
|
|
28
28
|
*/
|
|
29
|
-
onEntries: (entries: TShape
|
|
29
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
30
30
|
/**
|
|
31
31
|
* **Server method**
|
|
32
32
|
* onFlush is called on the server when the cache is flushed
|
|
33
33
|
*/
|
|
34
|
-
onFlush?: () => TShape
|
|
34
|
+
onFlush?: () => Array<TShape>;
|
|
35
35
|
}
|
|
36
36
|
declare function createHydrationStreamProvider<TShape>(): {
|
|
37
37
|
Provider: (props: {
|
|
@@ -45,12 +45,12 @@ declare function createHydrationStreamProvider<TShape>(): {
|
|
|
45
45
|
* **Client method**
|
|
46
46
|
* Called in the browser when new entries are received
|
|
47
47
|
*/
|
|
48
|
-
onEntries: (entries: TShape
|
|
48
|
+
onEntries: (entries: Array<TShape>) => void;
|
|
49
49
|
/**
|
|
50
50
|
* **Server method**
|
|
51
51
|
* onFlush is called on the server when the cache is flushed
|
|
52
52
|
*/
|
|
53
|
-
onFlush?: (() => TShape
|
|
53
|
+
onFlush?: (() => Array<TShape>) | undefined;
|
|
54
54
|
}) => React.JSX.Element;
|
|
55
55
|
context: React.Context<HydrationStreamContext<TShape>>;
|
|
56
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: TShape
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationStreamProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useServerInsertedHTML } from 'next/navigation'\nimport * as React from 'react'\n\nconst serializedSymbol = Symbol('serialized')\n\ninterface DataTransformer {\n serialize(object: any): any\n deserialize(object: any): any\n}\n\ntype Serialized<TData> = unknown & {\n [serializedSymbol]: TData\n}\n\ninterface TypedDataTransformer<TData> {\n serialize: (obj: TData) => Serialized<TData>\n deserialize: (obj: Serialized<TData>) => TData\n}\n\ninterface HydrationStreamContext<TShape> {\n id: string\n stream: {\n /**\n * **Server method**\n * Push a new entry to the stream\n * Will be ignored on the client\n */\n push: (...shape: Array<TShape>) => void\n }\n}\n\nexport interface HydrationStreamProviderProps<TShape> {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n}\n\nexport function createHydrationStreamProvider<TShape>() {\n const context = React.createContext<HydrationStreamContext<TShape>>(\n null as any,\n )\n /**\n\n * 1. (Happens on server): `useServerInsertedHTML()` is called **on the server** whenever a `Suspense`-boundary completes\n * - This means that we might have some new entries in the cache that needs to be flushed\n * - We pass these to the client by inserting a `<script>`-tag where we do `window[id].push(serializedVersionOfCache)`\n * 2. (Happens in browser) In `useEffect()`:\n * - We check if `window[id]` is set to an array and call `push()` on all the entries which will call `onEntries()` with the new entries\n * - We replace `window[id]` with a `push()`-method that will be called whenever new entries are received\n **/\n function UseClientHydrationStreamProvider(props: {\n children: React.ReactNode\n /**\n * Optional transformer to serialize/deserialize the data\n * Example devalue, superjson et al\n */\n transformer?: DataTransformer\n /**\n * **Client method**\n * Called in the browser when new entries are received\n */\n onEntries: (entries: Array<TShape>) => void\n /**\n * **Server method**\n * onFlush is called on the server when the cache is flushed\n */\n onFlush?: () => Array<TShape>\n }) {\n // unique id for the cache provider\n const id = `__RQ${React.useId()}`\n const idJSON = JSON.stringify(id)\n\n const [transformer] = React.useState(\n () =>\n (props.transformer ?? {\n // noop\n serialize: (obj: any) => obj,\n deserialize: (obj: any) => obj,\n }) as unknown as TypedDataTransformer<TShape>,\n )\n\n // <server stuff>\n const [stream] = React.useState<Array<TShape>>(() => {\n if (typeof window !== 'undefined') {\n return {\n push() {\n // no-op on the client\n },\n } as unknown as Array<TShape>\n }\n return []\n })\n const count = React.useRef(0)\n useServerInsertedHTML(() => {\n // This only happens on the server\n stream.push(...(props.onFlush?.() ?? []))\n\n if (!stream.length) {\n return null\n }\n // console.log(`pushing ${stream.length} entries`)\n const serializedCacheArgs = stream\n .map((entry) => transformer.serialize(entry))\n .map((entry) => JSON.stringify(entry))\n .join(',')\n\n // Flush stream\n stream.length = 0\n\n const html: Array<string> = [\n `window[${idJSON}] = window[${idJSON}] || [];`,\n `window[${idJSON}].push(${serializedCacheArgs});`,\n ]\n return (\n <script\n key={count.current++}\n dangerouslySetInnerHTML={{\n __html: html.join(''),\n }}\n />\n )\n })\n // </server stuff>\n\n // <client stuff>\n const onEntriesRef = React.useRef(props.onEntries)\n React.useEffect(() => {\n onEntriesRef.current = props.onEntries\n })\n\n React.useEffect(() => {\n // Client: consume cache:\n const onEntries = (...serializedEntries: Array<Serialized<TShape>>) => {\n const entries = serializedEntries.map((serialized) =>\n transformer.deserialize(serialized),\n )\n onEntriesRef.current(entries)\n }\n\n const win = window as any\n // Register cache consumer\n const winStream: Array<Serialized<TShape>> = win[id] ?? []\n\n onEntries(...winStream)\n\n // Register our own consumer\n win[id] = {\n push: onEntries,\n }\n\n return () => {\n // Cleanup after unmount\n win[id] = []\n }\n }, [id, transformer])\n // </client stuff>\n\n return (\n <context.Provider value={{ stream, id }}>\n {props.children}\n </context.Provider>\n )\n }\n\n return {\n Provider: UseClientHydrationStreamProvider,\n context,\n }\n}\n"],"mappings":";;;AAEA,SAAS,6BAA6B;AACtC,YAAY,WAAW;AAEvB,IAAM,mBAAmB,OAAO,YAAY;AA+CrC,SAAS,gCAAwC;AACtD,QAAM,UAAgB;AAAA,IACpB;AAAA,EACF;AAUA,WAAS,iCAAiC,OAiBvC;AAED,UAAM,KAAK,OAAa,YAAM,CAAC;AAC/B,UAAM,SAAS,KAAK,UAAU,EAAE;AAEhC,UAAM,CAAC,WAAW,IAAU;AAAA,MAC1B,MACG,MAAM,eAAe;AAAA;AAAA,QAEpB,WAAW,CAAC,QAAa;AAAA,QACzB,aAAa,CAAC,QAAa;AAAA,MAC7B;AAAA,IACJ;AAGA,UAAM,CAAC,MAAM,IAAU,eAAwB,MAAM;AACnD,UAAI,OAAO,WAAW,aAAa;AACjC,eAAO;AAAA,UACL,OAAO;AAAA,UAEP;AAAA,QACF;AAAA,MACF;AACA,aAAO,CAAC;AAAA,IACV,CAAC;AACD,UAAM,QAAc,aAAO,CAAC;AAC5B,0BAAsB,MAAM;AAE1B,aAAO,KAAK,GAAI,MAAM,UAAU,KAAK,CAAC,CAAE;AAExC,UAAI,CAAC,OAAO,QAAQ;AAClB,eAAO;AAAA,MACT;AAEA,YAAM,sBAAsB,OACzB,IAAI,CAAC,UAAU,YAAY,UAAU,KAAK,CAAC,EAC3C,IAAI,CAAC,UAAU,KAAK,UAAU,KAAK,CAAC,EACpC,KAAK,GAAG;AAGX,aAAO,SAAS;AAEhB,YAAM,OAAsB;AAAA,QAC1B,UAAU,MAAM,cAAc,MAAM;AAAA,QACpC,UAAU,MAAM,UAAU,mBAAmB;AAAA,MAC/C;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,yBAAyB;AAAA,YACvB,QAAQ,KAAK,KAAK,EAAE;AAAA,UACtB;AAAA;AAAA,MACF;AAAA,IAEJ,CAAC;AAID,UAAM,eAAqB,aAAO,MAAM,SAAS;AACjD,IAAM,gBAAU,MAAM;AACpB,mBAAa,UAAU,MAAM;AAAA,IAC/B,CAAC;AAED,IAAM,gBAAU,MAAM;AAEpB,YAAM,YAAY,IAAI,sBAAiD;AACrE,cAAM,UAAU,kBAAkB;AAAA,UAAI,CAAC,eACrC,YAAY,YAAY,UAAU;AAAA,QACpC;AACA,qBAAa,QAAQ,OAAO;AAAA,MAC9B;AAEA,YAAM,MAAM;AAEZ,YAAM,YAAuC,IAAI,EAAE,KAAK,CAAC;AAEzD,gBAAU,GAAG,SAAS;AAGtB,UAAI,EAAE,IAAI;AAAA,QACR,MAAM;AAAA,MACR;AAEA,aAAO,MAAM;AAEX,YAAI,EAAE,IAAI,CAAC;AAAA,MACb;AAAA,IACF,GAAG,CAAC,IAAI,WAAW,CAAC;AAGpB,WACE,oCAAC,QAAQ,UAAR,EAAiB,OAAO,EAAE,QAAQ,GAAG,KACnC,MAAM,QACT;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA,EACF;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-query-next-experimental",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.20",
|
|
4
4
|
"description": "Hydration utils for React Query in the NextJs app directory",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"react": "^18.2.0",
|
|
40
40
|
"react-dom": "^18.2.0",
|
|
41
41
|
"react-error-boundary": "^3.1.4",
|
|
42
|
-
"@tanstack/react-query": "5.0.0-beta.
|
|
42
|
+
"@tanstack/react-query": "5.0.0-beta.20"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"next": "^13.0.0",
|
|
46
46
|
"react": "^18.0.0",
|
|
47
47
|
"react-dom": "^18.0.0",
|
|
48
|
-
"@tanstack/react-query": "5.0.0-beta.
|
|
48
|
+
"@tanstack/react-query": "^5.0.0-beta.20"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
51
|
"clean": "rimraf ./build && rimraf ./coverage",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"test:types": "tsc",
|
|
54
54
|
"test:lib": "vitest run --coverage --passWithNoTests",
|
|
55
55
|
"test:lib:dev": "pnpm run test:lib --watch",
|
|
56
|
-
"test:build": "publint --strict
|
|
56
|
+
"test:build": "publint --strict",
|
|
57
57
|
"build": "tsup"
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -27,7 +27,7 @@ interface HydrationStreamContext<TShape> {
|
|
|
27
27
|
* Push a new entry to the stream
|
|
28
28
|
* Will be ignored on the client
|
|
29
29
|
*/
|
|
30
|
-
push: (...shape: TShape
|
|
30
|
+
push: (...shape: Array<TShape>) => void
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -42,12 +42,12 @@ export interface HydrationStreamProviderProps<TShape> {
|
|
|
42
42
|
* **Client method**
|
|
43
43
|
* Called in the browser when new entries are received
|
|
44
44
|
*/
|
|
45
|
-
onEntries: (entries: TShape
|
|
45
|
+
onEntries: (entries: Array<TShape>) => void
|
|
46
46
|
/**
|
|
47
47
|
* **Server method**
|
|
48
48
|
* onFlush is called on the server when the cache is flushed
|
|
49
49
|
*/
|
|
50
|
-
onFlush?: () => TShape
|
|
50
|
+
onFlush?: () => Array<TShape>
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
export function createHydrationStreamProvider<TShape>() {
|
|
@@ -74,12 +74,12 @@ export function createHydrationStreamProvider<TShape>() {
|
|
|
74
74
|
* **Client method**
|
|
75
75
|
* Called in the browser when new entries are received
|
|
76
76
|
*/
|
|
77
|
-
onEntries: (entries: TShape
|
|
77
|
+
onEntries: (entries: Array<TShape>) => void
|
|
78
78
|
/**
|
|
79
79
|
* **Server method**
|
|
80
80
|
* onFlush is called on the server when the cache is flushed
|
|
81
81
|
*/
|
|
82
|
-
onFlush?: () => TShape
|
|
82
|
+
onFlush?: () => Array<TShape>
|
|
83
83
|
}) {
|
|
84
84
|
// unique id for the cache provider
|
|
85
85
|
const id = `__RQ${React.useId()}`
|
|
@@ -95,13 +95,13 @@ export function createHydrationStreamProvider<TShape>() {
|
|
|
95
95
|
)
|
|
96
96
|
|
|
97
97
|
// <server stuff>
|
|
98
|
-
const [stream] = React.useState<TShape
|
|
98
|
+
const [stream] = React.useState<Array<TShape>>(() => {
|
|
99
99
|
if (typeof window !== 'undefined') {
|
|
100
100
|
return {
|
|
101
101
|
push() {
|
|
102
102
|
// no-op on the client
|
|
103
103
|
},
|
|
104
|
-
} as unknown as TShape
|
|
104
|
+
} as unknown as Array<TShape>
|
|
105
105
|
}
|
|
106
106
|
return []
|
|
107
107
|
})
|
|
@@ -122,7 +122,7 @@ export function createHydrationStreamProvider<TShape>() {
|
|
|
122
122
|
// Flush stream
|
|
123
123
|
stream.length = 0
|
|
124
124
|
|
|
125
|
-
const html: string
|
|
125
|
+
const html: Array<string> = [
|
|
126
126
|
`window[${idJSON}] = window[${idJSON}] || [];`,
|
|
127
127
|
`window[${idJSON}].push(${serializedCacheArgs});`,
|
|
128
128
|
]
|
|
@@ -145,7 +145,7 @@ export function createHydrationStreamProvider<TShape>() {
|
|
|
145
145
|
|
|
146
146
|
React.useEffect(() => {
|
|
147
147
|
// Client: consume cache:
|
|
148
|
-
const onEntries = (...serializedEntries: Serialized<TShape
|
|
148
|
+
const onEntries = (...serializedEntries: Array<Serialized<TShape>>) => {
|
|
149
149
|
const entries = serializedEntries.map((serialized) =>
|
|
150
150
|
transformer.deserialize(serialized),
|
|
151
151
|
)
|