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)

Answer 1

等待大神解答