为什么 Relay Modern 发出新请求，而不是使用缓存

Question

我有一个页面，您可以在其中查看当前项目并单击 "Next" 以查看下一个项目。这是这个组件的样子：

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

我期望的是，每个 Item 仅在第一次请求时才被提取，然后从缓存中使用。

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

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

Answer 1

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

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

Answer 2

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

NETWORK_ONLY – return每次到网络
STORE_THEN_NETWORK – 尝试从商店渲染，然后用来自网络的新数据更新商店。

试试这个：

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

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

为什么 Relay Modern 发出新请求，而不是使用缓存

Why Relay Modern is making new requests, instead of using cache

relay

reactjs

relayjs

relaymodern