如何判断中继查询是否为空或未加载

Question

我使用的是Reactjs和Relay。我想创造一些东西，如果"这个"项目尚未创建/数组为空。不知何故，如果数据尚未加载，中继查询将返回一个空数组，因此它将继续创建"此项"。因为它是空的。我们如何确定中继查询数据是actually empty还是not loaded/pending?

。e查询:

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

handle create "this"项目:

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

Answer 1

我从你的片段中猜测QueryRenderer是一个HOC，你正在使用包装中继的QueryRender组件?

如果是，通常是这样确定查询是否处于加载状态的:

// 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}
/>
);
}

这个片段取自relay.dev文档。

注意renderrenderProp是如何获得props字段一旦查询不再加载。

如果你正在使用新的钩子api，它将根据你使用的查询钩子而有所不同。