Как я могу получить данные на сервер GraphQL, когда я хочу - PullRequest
0 голосов
/ 31 октября 2019

Я пытаюсь использовать graphql и apollo для обработки данных.

Я создал сервер API с graphql и создал веб-сервер с React В официальном документе

Там написано, что я могу получить такие данные

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 также запускается снова. Это определенно не то, что я хочу. Я хочу контролировать время, когда нужно получить данные. Как я могу справиться с этим?

1 Ответ

0 голосов
/ 01 ноября 2019

Перемещение запроса за пределы компонента визуализации 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 не будет повторно получен при повторном отображении.

...