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

Posted 2023-03-08

【中文标题】中继：无法读取 null 的属性“fetchKey”

【英文标题】：Relay: Cannot read property 'fetchKey' of null

【发布时间】：2021-04-27 13:04:21

【问题描述】：

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

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 - 阅读文档！

【参考方案1】：

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

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

【讨论】：

奇怪的是官方文档没有说什么relay.dev/docs/guided-tour/rendering/loading-states。

Suspense 只是没有这样做，因为它可以更容易地替换为三级运算符，这使得所有努力都尽可能地怪异。

Suspense 仍在发挥作用。如果查询引用不为空，则并不意味着查询已被使用并完成。您可以在文档here 中找到示例。