UNPKG

@apollo/client-react-streaming

Version:

This package provides building blocks to create framework-level integration of Apollo Client with React's streaming SSR. See the [@apollo/client-integration-nextjs](https://github.com/apollographql/apollo-client-integrations/tree/main/packages/nextjs) pac

92 lines (86 loc) 3.4 kB
import * as React from 'react'; declare class JSONEncodeStream<T> extends TransformStream<T, JsonString<T>> { constructor(); } declare class JSONDecodeStream<T> extends TransformStream<JsonString<T> | AllowSharedBufferSource, T> { constructor(); } type JsonString<Encoded> = string & { __jsonString?: [Encoded]; }; /** * The logic for `createInjectionTransformStream` was strongly inspired by `createHeadInsertionTransformStream` * from https://github.com/vercel/next.js/blob/6481c92038cce43056005c07f80f2938faf29c29/packages/next/src/server/node-web-streams-helper.ts * * released under a MIT license (https://github.com/vercel/next.js/blob/6481c92038cce43056005c07f80f2938faf29c29/packages/next/license.md) * by Vercel, Inc., marked Copyright (c) 2023 Vercel, Inc. */ /** * > This export is only available in streaming SSR Server environments * * Used to create a `TransformStream` that can be used for piping a React stream rendered by * `renderToReadableStream` and using the callback to insert chunks of HTML between React Chunks. */ declare function createInjectionTransformStream(): { /** * @example * ```js * const { injectIntoStream, transformStream } = createInjectionTransformStream(); * const App = render({ assets, injectIntoStream }); * const reactStream = await renderToReadableStream(App, { bootstrapModules })); * await pipeReaderToResponse( * reactStream.pipeThrough(transformStream).getReader(), * response * ); * ``` */ transformStream: TransformStream; /** * `injectIntoStream` method that can be injected into your React application, to be made available to * * @example * ```js title="setup" * // create a Context for injection of `injectIntoStream` * const InjectionContext = React.createContext< * (callback: () => React.ReactNode) => void * >(() => {}); * // to be used in your application * export const InjectionContextProvider = InjectionContext.Provider; * // make it accessible to `WrapApolloProvider` * export const WrappedApolloProvider = WrapApolloProvider( * buildManualDataTransport({ * useInsertHtml() { * return React.useContext(InjectionContext); * }, * }) * ); * ``` * Then in your applications SSR render, pass this function to `InjectionContextProvider`: * ```js * <InjectionContextProvider value={injectIntoStream}> * ``` */ injectIntoStream: (callback: () => React.ReactNode) => void; }; /** * > This export is only available in streaming SSR Server environments * * Used to pipe a `ReadableStreamDefaultReader` to a `ServerResponse`. * * @example * ```js * const { injectIntoStream, transformStream } = createInjectionTransformStream(); * const App = render({ assets, injectIntoStream }); * const reactStream = await renderToReadableStream(App, { bootstrapModules })); * await pipeReaderToResponse( * reactStream.pipeThrough(transformStream).getReader(), * response * ); * ``` */ declare function pipeReaderToResponse(reader: ReadableStreamDefaultReader<any>, res: { write: (chunk: any) => void; end: () => void; destroy: (e: Error) => void; }): Promise<void>; export { JSONDecodeStream, JSONEncodeStream, type JsonString, createInjectionTransformStream, pipeReaderToResponse };