zenflow / next-with-gqless-example

Example project with Next.js & gqless (graphql client)

next-with-gqless-example

This app is an example of how to use gqless with Next.js. It mirrors the with-apollo Next.js example app. Apollo examples are included here for comparison.

Live demo.

The Gist

1. Copy boilerplate code from ./lib/gqless.js (including withGqless & useGqless) into your project
   1. Copy the file
   2. Install the required react-ssr-prepass package (actually @zen_flow/react-ssr-prepass until this patch is released).
   3. Add the required getClient function to gqless/client.ts.

   export const createClient = (queryFetcher = fetchQuery) => new Client<Query>(schema.Query, queryFetcher);
   

2. Use the withGqless HOC on the Next.js pages you want SSR'd. This will add a React context provider for the gqless client and wrap getInitialProps to prefetch the necessary data before displaying the page.
3. Use the useGqless hook to access the gqless client (and query) from context (in components that will be SSR'd). We cannot use the singleton client (or query) exported from Client.ts for SSR because on the server we want to have one client per request.
4. Use SsrCompatibleSuspense instead of the regular React Suspense component. This will stop ReactDOMServer from complaining and crashing when <Suspense/> is encountered during SSR. The caveat here is that React will log warnings when rehydrating browser-side, since what's rendered on browser is supposed to match what was rendered on the server. (Issue #2)