中继：无法读取 null 的属性“fetchKey”

我尝试使用新的中继挂钩，但收到此错误：

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)

您需要检查是否queryReference不为空，所以你不调用usePreloadedQuery在 Home 组件中使用 null 值。尝试使用：

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