如何确定中继查询是不是为空或未加载

Posted 2023-03-08

【中文标题】如何确定中继查询是不是为空或未加载

【英文标题】：How to determine if relay query is empty or not loaded如何确定中继查询是否为空或未加载

【发布时间】：2021-10-03 12:12:30

【问题描述】：

我正在使用 Reactjs 和 Relay。如果尚未创建“此”项目/数组为空，我想创建一些东西。不知何故，如果数据尚未加载，中继查询将返回一个空数组，因此它会一直创建“此项目”，因为它被认为是空的。我们如何确定中继查询数据是actually empty还是not loaded/pending？

即查询：

QueryRenderer(MyComponent, 
    query: graphql`
      query MyComponentQuery($id: ID!) 
        items(containerId: $id) 
          id
          title
        
      
    `,
    vars: ( containerId ) => (
      id: containerId
    )
  )

处理创建“这个”项目：

useEffect(() => 
    if(!props.items)
      // Create "this" item
    
, [props.items]);

【参考方案1】：

我从你的 sn-p 猜测 QueryRenderer 是你正在使用包装中继的 QueryRender 组件的 HOC？

如果是这样，这就是您通常确定查询是否处于加载状态的方式：

// Example.js
import React from 'react';
import  QueryRenderer, graphql  from 'react-relay';

const renderQuery = (error, props) => 
  if (error) 
    return <div>error.message</div>;
   else if (props) 
    return <div>props.page.name is great!</div>;
  
  return <div>Loading</div>;


const Example = (props) => 
  return (
    <QueryRenderer
      environment=environment
      query=graphql`
        query ExampleQuery($pageID: ID!) 
          page(id: $pageID) 
            name
          
        
      `
      variables=
        pageID: '110798995619330',
      
      render=renderQuery
    />
  );

这个sn-p取自relay.dev docs。

请注意，一旦查询不再加载，render renderProp 如何获取 props 字段。

如果您使用的是新的 hooks-api，它会根据您使用的查询挂钩而有所不同。