SSR support like Apollo Client's getDataFromTree?

[niamleeson]

Hello,

With Apollo Client, you could just use useQuery in any level of the component tree and the app would still render in SSR mode like this: https://github.com/vercel/next.js/blob/86160a5190c50ea315c7ba91d77dfb51c42bc65f/examples/with-apollo/lib/apollo.js

And here is the source code for getDataFromTree: https://github.com/apollographql/apollo-client/blob/master/src/react/ssr/getDataFromTree.ts

With this library, you have to write your fetch twice, once in getServerSideProps and inside the component for client side fetching if the data changes during runtime.

Is there a way to avoid writing the queries twice and use useSWR at any level of the component tree?

[sergiodxa]

What I usually do is to keep SWR only for client-only data, if I need something with SSR and SWR I create a useMyData Hook calling SWR and I export it together with the fetcher.

export function getTodos() {
  // fetch todos and return them
}

export function useTodos(options) {
  return useSWR("todos", getTodos, options)
}

Then you can use useTodos inside your components and call getTodos inside getStaticProps or getServerSideProps, and pass them to useTodos as initial data.

[niamleeson]

Ho my. That's clean. Thank you!

[niamleeson]

I haven't tested this but this could be really useful for this library https://github.com/ctrlplusb/react-tree-walker