中继：无法读取 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;

错误：

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

解决方法

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

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