Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

@apollo/react-hooks SSR not working with getDataFromTree #3251

Closed
kirankalyan5 opened this issue Jul 16, 2019 · 6 comments
Closed

@apollo/react-hooks SSR not working with getDataFromTree #3251

kirankalyan5 opened this issue Jul 16, 2019 · 6 comments
Assignees
@hwillson
Milestone
Release 3.0

Comments

@kirankalyan5
Copy link

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
@hwillson hwillson self-assigned this Jul 16, 2019
@hwillson hwillson added this to the Release 3.0 milestone Jul 16, 2019
@Vincz
Copy link

Vincz commented Jul 16, 2019

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
});

@kirankalyan5
Copy link
Author

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.

@hwillson
Copy link
Member

@kirankalyan5 Use:

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

@kirankalyan5
Copy link
Author

Perfect 👌 Thanks @hwillson & @Vincz.

@nezdemkovski
Copy link

@hwillson Just installed @apollo/react-hooks@0.1.0-beta.11 and it doesn't have getMarkupFromTree function anymore. There is something I can use instead now?
Thanks!

@hwillson
Copy link
Member

@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.

@18601673727 18601673727 mentioned this issue Jul 27, 2019
Closed
@alfechner alfechner mentioned this issue Oct 30, 2019
Open
@9renpoto 9renpoto mentioned this issue Jan 14, 2020
Merged
@akshatnitd akshatnitd mentioned this issue Feb 18, 2020
Open
@eric-burel eric-burel mentioned this issue Jun 10, 2020
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@hwillson hwillson

Labels
None yet
Projects
None yet
Milestone
Release 3.0
Development

No branches or pull requests
4 participants
@hwillson @Vincz @nezdemkovski @kirankalyan5