我如何在需要时将数据提取到 graphql 服务器

Question

我正在尝试使用 graphql 和 apollo 来处理数据。

我用graphql创建了API服务器，用React在官方文档中创建了web服务器

它说我可以获取这样的数据

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

还没有问题。 但是，如果我在此Dogs组件中添加一些 state ，例如

const [someList, setSomeList] = useState([]);

每当 someList 被更改以重新渲染 Dogs 组件时，useQuery 也会再次运行。 这绝对不是我想要的。 我想控制获取数据的时间。 我该如何处理？

Answer 1

将查询Dogs渲染组件之外：

function Dogs({ onDogSelected, data }) {

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

function DoStuffHere() {
  const [someList, setSomeList] = useState([]);
  const { loading, error, data } = useQuery(GET_DOGS);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  if (someList.length){
    console.log("do someList stuff");
  }
  return (<Dogs data={data} onDogSelected={(x) => {
    // setSomeList? here?
  }} />)
}

将查询移到Dogs之外，组件将确保Dogs组件在重新呈现时不会重新获取。