如何顺序获取 2 个片段（1 个是可重新获取的）

Question

我是 Relay 的新手，目前正在尝试构建一个包含 2 个下拉菜单的地址表：

1. 国家名单
2. 所选国家/地区的州列表

为简单起见，组件可以像这样

const AddressForm: React.FC = () => {
  const [country, setCountry] = useState('');
  const [state, setState] = useState('');

  // ... some logic to fetch from server

  return (
    <>
      <Countries country={country} onCountryChange={setCountry} />
      <br />
      <States state={state} onStateChange={setState} />
    </>
  );
};

两个列表都存储在我们的 graphql 服务器中。该表格的初始国家/地区值为

''

。每当国家值发生变化时，我们需要获取新选择国家的州列表。获取状态列表时，我不希望整个表单暂停，而只是暂停状态组件。

根据 Relay 指南，我有以下假设：

1. Countries

   组件应该声明一个片段，列出它需要的国家字段，即

   name

   和

   code

2. States 组件应该声明一个可重新获取的片段，列出它需要的 States 的字段，还有

   name

   和

   code

我正在努力寻找如何实现这一目标并面对这些问题的指南：

1. useRefetchableFragment 需要片段引用作为第二个参数。如果我在 AddressForm 的查询中包含 States 片段，那么当 Country 更改时，整个 AddressForm 组件将暂停。
2. 我怀疑我需要在 AddressForm 中进行 2 个查询（虽然不确定）并且不知道如何在 Relay 中实现这个

任何指导表示赞赏