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

Question

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

我用 graphql 创建了 API 服务器，用 React 创建了网络服务器在官方document

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

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 组件中添加一些状态，例如

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 组件在重新呈现时不会重新获取。

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

How can I fetch data to graphql server when I want

javascript

node.js

apollo

reactjs

graphql