0

我有一个页面，您可以在其中查看当前项目，然后单击“下一步”查看下一个。下面是这个组件的样子： 

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      index: 0,
      ids: ["VXNlcjox", "VXNlcjoy"]
    };
    this.onNext = () => this.setState(s => ({ index: (s.index + 1) % 2 }));
  }

  render() {
    const { index, ids } = this.state;
    return (
      <div>
        <button type="button" onClick={this.onNext}>
          next
        </button>
        <QueryRenderer
          environment={environment}
          query={graphql`
            query App_Query($id: ID!) {
              node(id: $id) {
                id
              }
            }
          `}
          variables={{ id: ids[index] }}
          render={({ error, props }) => {
            if (error) {
              return <div>Error!</div>;
            }
            if (!props) {
              return <div>Loading...</div>;
            }
            return <pre>{JSON.stringify(props, null, 2)}</pre>;
          }}
        />
      </div>
    );
  }
}

我期望的是，只有在第一次请求时才会获取每个项目，然后再从缓存中使用。

但我看到的是，每次单击“下一步”时，网络选项卡中都会发出新请求，即使之前已请求过此项目。如果我打开 Relay DevTools - 具有此 ID 的项目已经在商店中：

中继开发工具

那么为什么每次都发出新的请求呢？Relay Modern 不应该重用以前缓存的数据吗？

4

2 回答 2

2

您可以传递QueryRenderer以下dataFrom道具之一：

  • NETWORK_ONLY– 每次返回网络。
  • STORE_THEN_NETWORK– 尝试从存储中渲染，然后使用来自网络的新数据更新存储。

尝试这个：

<QueryRenderer
  dataFrom="STORE_THEN_NETWORK"
  ...
/>

查看实现：https ://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayQueryRenderer.js#L297-L299

于 2018-05-17T07:01:32.893 回答
1

我不认为这是查询渲染器默认的工作方式。

您可能正在寻找这个relay-query-lookup-renderer

于 2018-04-30T08:02:52.420 回答