Using new relay hooks with next

[jcolakk]

Hi guys, I started to investigate new relay hooks with NextJS. Currently I'm investigating on how to replace the QueryRenderer with useLazyLoadQuery. The problem I've stumbled upon is that useLazyLoadQuery leverages the Suspense to show loading state ie fallback and Suspense doesn't really work when SSR-ing.

I've tried something like this, because I get the data on the server so I can just use the cache(meaning the fallback wont be needed):

{isBrowser() ? (
    <Suspense fallback={<Loading />}>
        <HomePageQuery tab={tab} />
    </Suspense>
    ) : (
    <HomePageQuery tab={tab} />
    )}

This works fine, but then I get a console warning about the html mismatching on the server and on the client, which makes sense since I'm essentially showing 2 different things on the server and on the client.

Any ideas how to handle this? If you already tried to tackle it

[tbergquist-godaddy]

I haven't really tried any of this myself, yet.

There is a loadQuery function that can be used with usePreloadedQuery I guess. relay.dev. Did you try that?

Also, QueryRenderer should still work with the hooks api, as you can see from example-relay

[mrtnzlml]

I am afraid this might be one of the limitations described during the Relay 11.0 release. Also a reason why adeira/relay-example still uses the container API as @tbergq already mentioned. 🙂

Still, some parts of the hooks API are very much usable (fragments for example since they are not loading anything on their own) so you can start slowly migrating what's possible and ignore what's not possible. I think we will follow the Relay releases so no reason to panic. 😎

[tbergquist-godaddy]

I was able to make relay useLazyLoadQuery work with nextjs SSR.

in your page:

import { fetchQuery } from 'react-relay';

const fetchData = ({ environment, query, variables }) =>
  new Promise((resolve, reject) => {
    fetchQuery(environment, query, variables).subscribe({
      complete: () => resolve(null),
      error: (error) => reject(error),
    });
  });

export function getServerSideProps(ctx) {
  await fetchData(environment, query, variables);
  return {props: {records: environment.getStore().getSource().toJSON()}}
}

Then in your _app

function App({Component, pageProps: {records}}) {
  const network = Network.create(fetchQuery);
  const store = new Store(new RecordSource(records));

  const environment = new Environment({
    network,
    store,
  });

return <RelayEnvironmentProvider environment={environment}><Component /></RelayEnvironmentProvider>
}

And somewhere in your app

function LoadSomeData() {
const data = useLazyLoadQuery(
    myQuery,
    myVariables,
    { fetchPolicy: 'store-or-network' },
  );
}
return <pre>{JSON.stringify(data, null, 2)}</pre>

That way, your store should already be populated, and it won't need t o try to suspend on the server.