@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
TypeScript
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 };