React-apollo: @apollo/react-hooks SSR not working with getDataFromTree

Created on 16 Jul 2019 · 6Comments · Source: apollographql/react-apollo

I'm using the latest @apollo/react-hooks@beta, but hooks for SSR doesn't pre-fetch that query data for the component with { getDataFromTree } from react-apollo.

Also, not sure if I'm missing something

My setup is something like this.

import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloClient } from 'apollo-client';
import { getDataFromTree } from "react-apollo"
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

const client = new ApolloClient(
link: new HttpLink({
      uri: location,
      headers: {
        authorization: '', //token
      },
    }),
    cache: new InMemoryCache(),
    ssrMode: true,
); // all client set up

  const WrappedApp = (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
  await getDataFromTree(WrappedApp)
  const initialState = client.extract();
  const content = ReactDOM.renderToString(WrappedApp);

  const html = getHtml(content, initialState); 

// finally send the rendered HTML with data
  res.status(200);
  res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
  res.end();
});

But currently, the Html from a server and the window variable doesn't include any data.

The same setup works when I use the ApolloProvider from 'react-apollo-hooks' with their getMarkupFromTree.

let me know if I'm missing something or I shall create a new issue.

Thanks
cc @hwillson

Source

kirankalyan5

👍2

Most helpful comment

@yakovlevyuri We've split the SSR stuff out into its own package, to make including SSR capabilities optional (and to help with bundle sizes). You can now find the getMarkupFromTree function in the @apollo/react-ssr package.

hwillson on 19 Jul 2019

👍11 🎉2

All 6 comments

I'm using it like that and it's working :)

import { getMarkupFromTree, ApolloProvider } from '@apollo/react-hooks';
...
const tree = <ApolloProvider client={client}><App /></ApolloProvider>
const content = await getMarkupFromTree({
    tree,
    renderFunction: renderToString
});

Vincz on 16 Jul 2019

🎉1

Hi @Vincz Thanks for your response, very helpful and didn't knew that '@apollo/react-hooks' exposes getMarkupFromTree and I had been using getDataFromTree, it works as expected now:)

Also, I have another question regarding testing the { ApolloProvider } from '@apollo/react-hooks'

Using { MockedProvider } from 'react-apollo/test-utils' throws the following error

Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

I'm currently using MockLink to test the components.

Please find my current test setup in the apollo spectrum here - https://spectrum.chat/apollo/testing/how-to-unit-test-the-apolloprovider-from-apollo-react-hooks-queries-using-mockedprovider~6e71a156-5938-4e39-9971-63b73da1788d

Is there a better and a nicer way like MockedProvider for hooks version?

Appriciate your help and thanks in advnace.

kirankalyan5 on 17 Jul 2019

@kirankalyan5 Use:

import { MockedProvider } from '@apollo/react-testing';

hwillson on 17 Jul 2019

🎉1

Perfect 👌 Thanks @hwillson & @Vincz.

kirankalyan5 on 17 Jul 2019

@hwillson Just installed @apollo/[email protected] and it doesn't have getMarkupFromTree function anymore. There is something I can use instead now?
Thanks!