title: Apollo local state doesn't return data on ssr
body: <p>I'm implementing a universal react application using Apollo Client, I'm facing an issue where I cannot get the proper initial state value from local state on server-side but it works on client. What I need is to get the proper <strong>themeMode</strong> on both server and client.</p>
  <p>Here's what I have on my <strong>serverRenderer</strong>:</p>
  <pre><code>  const client: ApolloClient&lt;NormalizedCacheObject&gt; = new ApolloClient({
      ssrMode: true,
      link: createHttpLink({
        uri: process.env.GRAPHQL_ENDPOINT,
        credentials: 'same-origin',
        fetch,
      }),
      cache: new InMemoryCache({ fragmentMatcher }),
      ssrForceFetchDelay: 100,
      ...apolloConfigs,
    });
  
    const Application = sheets.collect(
      &lt;ApolloProvider client={client}&gt;
        &lt;Provider store={res.locals.store}&gt;
          &lt;Router location={req.url} context={routerContext}&gt;
            &lt;HelmetProvider context={helmetContext}&gt;
              &lt;App /&gt;
            &lt;/HelmetProvider&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      &lt;/ApolloProvider&gt;
    );
  
    const cookies = new Cookies(req.headers.cookie);
  
    const DOMGenerator = (content: string): string =&gt; {
      const materialCSS = sheets.toString();
      const state = res.locals.store.getState();
      initialState.themeMode = cookies.get('themeMode');
      client.writeData({ data: initialState });
      const initialApolloState = client.extract();
      const doctype = '&lt;!doctype html&gt;';
      return (
        doctype +
        renderToStaticMarkup(
          &lt;Html
            css={[res.locals.assetPath('bundle.css'), res.locals.assetPath('vendor.css')]}
            helmetContext={helmetContext}
            scripts={[res.locals.assetPath('bundle.js'), res.locals.assetPath('vendor.js')]}
            materialCSS={materialCSS.replace(/\r?\n|\r/g, '')}
            state={JSON.stringify(state)}
            initialApolloState={JSON.stringify(initialApolloState)}
          &gt;
            {content}
          &lt;/Html&gt;
        )
      );
    };
  
    try {
      const result = await renderToStringWithData(Application);
      return res.send(DOMGenerator(result));
    } catch (e) {
      console.error(e); // eslint-disable-line
      return res.send('500 Internal Server Error');
    }
  </code></pre>
  <p>My <strong>App.tsx</strong>:</p>
  <pre><code>const QUERY = gql`
    query MyTheme {
      themeMode @client
    }
  `;
  
  const App: React.FC&lt;OwnProps&gt; = () =&gt; {
    const { data } = useQuery(QUERY);
    const theme = Theme(data?.themeMode);
    const styles = Styles({ theme });
  
    return (
      &lt;StylesProvider injectFirst&gt;
        &lt;ThemeProvider theme={theme} key={data?.themeMode}&gt;
          &lt;Helmet&gt;
            &lt;title&gt;Example&lt;/title&gt;
          &lt;/Helmet&gt;
          &lt;Global styles={styles.global} /&gt;
          &lt;div&gt;Example&lt;/div&gt;
        &lt;/ThemeProvider&gt;
      &lt;/StylesProvider&gt;
    );
  };
  
  </code></pre>
  <p>If I log <strong>data</strong> on <strong>App.tsx</strong> it returns <strong>undefined</strong> on server but it returns the correct value on the browser.</p>