javascript - Relay: Cannot read property 'fetchKey' of null

Question

Im trying to use the new relay hooks but getting this error:

import React, { Fragment, Suspense, useEffect } from 'react';
import Banner from './banner/Banner.react';

const { graphql, useQueryLoader, usePreloadedQuery } = require('react-relay/hooks');

const query = graphql`
  query HomeQuery {
    viewer {
      id
      email
      ...Banner_viewer
    }
  }
`;

const HomeContainer = () => {
  const [queryReference, loadQuery] = useQueryLoader(query);

  useEffect(() => {
    loadQuery({});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Suspense fallback="Loading...">
      <Fragment>
        <Home queryReference={queryReference} />
      </Fragment>
    </Suspense>
  );
};

const Home = ({ queryReference }) => {
  const data = usePreloadedQuery(query, queryReference);
  console.log('data:', data);
  return (
    <>
      <Banner viewer={data?.viewer} />
      <div>HOME PAGE</div>
    </>
  );
};

export default HomeContainer;

Error:

usePreloadedQuery.js:38 Uncaught TypeError: Cannot read property 'fetchKey' of null
    at usePreloadedQuery (usePreloadedQuery.js:38)
    at Home (Home.jsx:34)

question from:https://stackoverflow.com/questions/65855736/relay-cannot-read-property-fetchkey-of-null

Answer 1

You need to check if queryReference is not null, so you don't call usePreloadedQuery with a null value in your Home component. Try with:

return (
  <Suspense fallback="Loading...">
    <Fragment>
      {queryReference != null && <Home queryReference={queryReference} />}
    </Fragment>
  </Suspense>
);