Join us from October 8-10 in New York City to learn the latest tips, trends, and news about GraphQL federation and API platform engineering.Join us for GraphQL Summit 2024 in NYC
Docs
Start for Free

SSR

Apollo Client React server side rendering API


Installation

>= 3 includes React hooks functionality out of the box. You don't need to install any additional packages.

getDataFromTree

The getDataFromTree function takes your React tree, determines which queries are needed to render them, and then fetches them all.

import { getDataFromTree } from "@apollo/client/react/ssr";

Params

ParamTypedescription
treeReact.ReactNodeThe React tree you would like to render and fetch data for.
context{ [key: string]: any }Optional values you would like to make available in the React Context during rendering / data retrieval.

Result

getDataFromTree returns a promise (Promise<string>) which resolves when the data is ready in your Apollo Client store. The result is generated using ReactDOMServer.renderToStaticMarkup under the hood.

Example

See Executing queries with getDataFromTree.

renderToStringWithData

The renderToStringWithData function is similar to getDataFromTree, but uses ReactDOMServer.renderToString to render its result instead of ReactDOMServer.renderToStaticMarkup (the React docs help explain the difference).

import { renderToStringWithData } from "@apollo/client/react/ssr";

Params

ParamTypedescription
componentReactElementThe React component tree you would like to render and fetch data for.

Result

renderToStringWithData returns a promise (Promise<string>) which resolves when the data is ready in your Apollo Client store. The result is generated using ReactDOMServer.renderToString under the hood.

Previous
Testing
Next
Components (deprecated)
Rate articleRateEdit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc., d/b/a Apollo GraphQL.

Privacy Policy

Company