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 · 10 comments

Comments

Projects
None yet
8 participants
@craigcbrunner
Copy link

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

This comment has been minimized.

Copy link
Owner

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner

commented Jan 25, 2019

@craigcbrunner Yes, that's correct.

@jamesreggio

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Apr 3, 2019

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

@paulisloud

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner

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

This comment has been minimized.

Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.