Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make useQuery work with with getDataFromTree (server side rendering) #52

Open
craigcbrunner opened this issue Jan 7, 2019 · 12 comments
Open

Comments

@craigcbrunner
Copy link

@craigcbrunner craigcbrunner commented Jan 7, 2019

I am using next.js with Apollo, and have been writing Hooks based components. I noticed react-apollo-hooks doesn't seem to work with getDataFromTree when it does SSR and fills the cache. If I use from react-apollo it correctly sets the initial data in the apollo cache and doesn't refetch it, but useQuery only seems to fetch client side... is this expected/going to be fixed?

@trojanowski
Copy link
Owner

@trojanowski trojanowski commented Jan 7, 2019

@craigcbrunner It will be partially fixed in #44 (should be merged soon). It will provide API for server-side rendering components using react-apollo-hooks. It won't support SSR for components using both react-apollo and react-apollo-hooks, but it will be possible to add it later - please let me know if it's a case for you.

@treyhuffine
Copy link

@treyhuffine treyhuffine commented Jan 23, 2019

@craigcbrunner if you are following the with-apollo example from the next.js github, you should be able to replace the following line with getMarkupFromTree provided by react-apollo-hooks - https://github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/with-apollo-client.js#L23

Your code will look something like:

//... imports
import { renderToString } from 'react-dom/server';
import { getMarkupFromTree } from 'react-apollo-hooks';

// ... code from next.js
        await getMarkupFromTree({
            renderFunction: renderToString,
            tree: <App {...appProps} Component={Component} router={router} apolloClient={apollo} />,
        });

It looks to be SSRing for me without any errors.

That's the basic implementation of how react-apollo defines getDataFromTree - https://github.com/apollographql/react-apollo/blob/327edc5d81f352fa9e00854eb82ef08e7e2c75b6/src/getDataFromTree.ts#L86

Does this seem reasonable @trojanowski?

@trojanowski
Copy link
Owner

@trojanowski trojanowski commented Jan 25, 2019

@craigcbrunner Yes, that's correct.

@jamesreggio
Copy link

@jamesreggio jamesreggio commented Jan 27, 2019

Just a +1 for supporting server rendering of legacy react-apollo query components and HOCs alongside the support for useQuery. Looks like it shouldn't be particularly difficult to harmonize these two.

@macrozone
Copy link

@macrozone macrozone commented Apr 1, 2019

@craigcbrunner if you are following the with-apollo example from the next.js github, you should be able to replace the following line with getMarkupFromTree provided by react-apollo-hooks - https://github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/with-apollo-client.js#L23

Your code will look something like:

//... imports
import { renderToString } from 'react-dom/server';
import { getMarkupFromTree } from 'react-apollo-hooks';

// ... code from next.js
        await getMarkupFromTree({
            renderFunction: renderToString,
            tree: <App {...appProps} Component={Component} router={router} apolloClient={apollo} />,
        });

It looks to be SSRing for me without any errors.

That's the basic implementation of how react-apollo defines getDataFromTree - https://github.com/apollographql/react-apollo/blob/327edc5d81f352fa9e00854eb82ef08e7e2c75b6/src/getDataFromTree.ts#L86

Does this seem reasonable @trojanowski?

Doesn't this render the whole tree twice on the server? once for nextjs and once to extract the apollo-cache?

usually getMarkupFromTree returns the markup which will be sent to the client, but with nextjs, this is done internally

@madsobel
Copy link

@madsobel madsobel commented Apr 3, 2019

I can confirm that @treyhuffine's suggestion works.
I would however prefer a more "elegant" way of doing this :)

@paulisloud
Copy link

@paulisloud paulisloud commented Apr 17, 2019

This issue seems to be related to the one I opened here, but after implementing the code as described above, the queries still run after I load a page, when using ApolloConsumer, and then running the query inside of a react hook (doing it this way because I need to specify the client, as I have two in my application).

@kitten
Copy link

@kitten kitten commented May 17, 2019

I've recently worked on a more elegant solution for this that's temporary until actual suspense lands in React. It still applies the two pass approach, but it should be more efficient than actually rendering the tree repeatedly.

Maybe someone here will find it useful 😄 https://github.com/FormidableLabs/react-ssr-prepass

@trojanowski
Copy link
Owner

@trojanowski trojanowski commented May 17, 2019

@kitten do you have an idea how it could be used with hooks? In the example at https://github.com/FormidableLabs/react-ssr-prepass the fetchData method is used, but hooks are called inside of functional components.

@kitten
Copy link

@kitten kitten commented May 17, 2019

@trojanowski It supports the current spec/API for suspense, so you can throw a promise any time and as react-ssr-prepass is walking the tree it'll queue them up and suspend on those.

@eric-burel
Copy link

@eric-burel eric-burel commented May 12, 2020

@craigcbrunner It will be partially fixed in #44 (should be merged soon). It will provide API for server-side rendering components using react-apollo-hooks. It won't support SSR for components using both react-apollo and react-apollo-hooks, but it will be possible to add it later - please let me know if it's a case for you.

Hi, could you please clarify how it should be used? I don't need to support "react-apollo" components, only hooks so that sounds ok to me. However I don't get which call to make in this case?

Edit: this seems like an old issue actually but I seem to have similar problem on newer v3 of Apollo.

@eric-burel
Copy link

@eric-burel eric-burel commented May 12, 2020

Ok after more investigation this issue seems stale. useQuery in itself is fine, but Apollo v3 is in beta version and people are experiencing silently failing SSR a lot apollographql/react-apollo#3678

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants