1 | # `@shopify/react-serialize`
|
2 |
|
3 | Provides an idiomatic way to serialize data for rehydration in a universal react application.
|
4 |
|
5 | ## Installation
|
6 |
|
7 | ```bash
|
8 | $ yarn add @shopify/react-serialize
|
9 | ```
|
10 |
|
11 | ## Usage
|
12 |
|
13 | On the server, the `<Serializer />` component will serialize whatever you pass as it's `data` prop.
|
14 |
|
15 | ```javascript
|
16 | // in your server renderer
|
17 | import {Serializer} from '@shopify/react-serialize';
|
18 |
|
19 | ...
|
20 |
|
21 | const apolloState = getDatafromTree(appMarkup)
|
22 |
|
23 | const markup = react.renderToString(
|
24 | <React.Fragment>
|
25 | {appMarkup}
|
26 | <Serializer id="apollo-data" data={apolloState}>
|
27 | </React.Fragment>
|
28 | );
|
29 | ```
|
30 |
|
31 | Then on the client, you can use `getSerialized` to fetch that data out of the DOM and initialize whatever you need.
|
32 |
|
33 | ```javascript
|
34 | // when you are rehydrating on the client
|
35 | import {getSerialized} from '@shopify/react-serialize';
|
36 | import ApolloClient from 'apollo-client';
|
37 |
|
38 | ...
|
39 |
|
40 | const {data: initialApolloData} = getSerialized('apollo-data');
|
41 | const client = new ApolloClient({
|
42 | ...myConfig,
|
43 | cache: cache.restore(initialApolloData),
|
44 | });
|
45 | ```
|