为何Relay Modern不使用缓存而发起新请求？

看起来你已经搭建了一个基础的Item切换页面，我先帮你把提供的组件代码格式化完整，再补充一些实用的优化建议：

原始组件代码（格式化后） #

import { Component } from 'react';
import { QueryRenderer } from 'react-relay';

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}
          // 补充你的Relay查询语句
          query={/* 你的Item查询 */}
          variables={{ id: ids[index] }}
          render={({ error, props }) => {
            if (error) return <div>加载出错</div>;
            if (!props) return <div>加载中...</div>;
            // 渲染当前Item内容
            return <div>当前Item: {JSON.stringify(props.item)}</div>;
          }}
        />
      </div>
    );
  }
}

实用优化建议 #

• 动态循环长度：把硬编码的%2改成% s.ids.length，以后新增Item ID时不用修改切换逻辑，自动支持循环：

  this.onNext = () => this.setState(s => ({ index: (s.index + 1) % s.ids.length }));
  

• 语义化按钮文本：把按钮文本改成更清晰的提示，比如结合当前索引显示进度：

  <button type="button" onClick={this.onNext}>
    Next Item ({index + 1}/{ids.length})
  </button>
  

• 转换为现代函数组件：类组件可以改成更简洁的函数组件写法，配合useState和useCallback：

  import { useState, useCallback } from 'react';
  import { QueryRenderer } from 'react-relay';
  
  function App() {
    const [index, setIndex] = useState(0);
    const ids = ["VXNlcjox", "VXNlcjoy"];
  
    const onNext = useCallback(() => {
      setIndex(prev => (prev + 1) % ids.length);
    }, [ids.length]);
  
    return (
      <div>
        <button type="button" onClick={onNext}>
          Next Item ({index + 1}/{ids.length})
        </button>
        <QueryRenderer
          environment={environment}
          query={/* 你的Item查询 */}
          variables={{ id: ids[index] }}
          render={({ error, props }) => {
            if (error) return <div>加载出错</div>;
            if (!props) return <div>加载中...</div>;
            return <div>当前Item: {props.item.name}</div>;
          }}
        />
      </div>
    );
  }
  

• 确保QueryRenderer响应索引变化：当index更新时，variables里的id会同步变化，Relay会自动重新获取对应Item的数据，保证页面内容实时更新。

内容的提问来源于stack exchange，提问作者Oles Savluk