Попытка вызова useQuery в функции с реакцией-apollo-hooks

Question

Я хочу вызывать useQuery всякий раз, когда мне это нужно,

, но useQuery не может внутри функции.

Мой пробный код:

export const TestComponent = () => {
...
  const { data, loading, error } = useQuery(gql(GET_USER_LIST), {
    variables: {
      data: {
        page: changePage,
        pageSize: 10,
      },
    },
  })
  ...
  ...
  const onSaveInformation = async () => {
    try {
      await updateInformation({...})
      // I want to call useQuery once again.
    } catch (e) {
      return e
    }
}
...

Как мненесколько раз вызвать useQuery?

Могу ли я позвонить, когда захочу?

Я искал несколько сайтов, но не смог найти решения.

Answer 1

useQuery является декларативным React Hook.Он не предназначен для вызова в смысле классической функции для получения данных.Сначала убедитесь, что вы понимаете React Hooks или просто не используете их сейчас (90% вопросов о Stackoverflow происходят потому, что люди пытаются научиться многим вещам одновременно).Документация Apollo очень хороша для официального пакета react-apollo, который использует реквизит рендеринга.Это работает так же хорошо, и как только вы поняли Apollo Client и Hooks, вы можете пойти на небольшой рефакторинг.Итак, ответы на ваши вопросы:

Как мне позвонить useQuery несколько раз?

Вы не звоните несколько раз.Компонент будет автоматически перерисован, когда результат запроса станет доступным или будет обновлен.

Могу ли я вызывать его, когда захочу?

Нет, перехваты могут вызываться только наверхний уровень.Вместо этого данные доступны в вашей функции из верхней области видимости (замыкание).

Ваш updateInformation, вероятно, должен быть мутацией, которая обновляет кэш приложения, что снова вызывает повторное рендеринг компонента React, потому что это "подписался "на запрос.В большинстве случаев обновление происходит полностью автоматически, поскольку Apollo идентифицирует объекты по комбинации __typename и id.Вот некоторый псевдокод, который иллюстрирует, как мутации работают вместе с мутациями:

const GET_USER_LIST = gql`
  query GetUserList {
    users {
      id
      name
    }
  }
`;

const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, update: { name: $name }) {
      success
      user {
        id
        name
      }
    }
  }
`;

const UserListComponen = (props) => {
  const { data, loading, error } = useQuery(GET_USER_LIST);
  const [updateUser] = useMutation(UPDATE_USER);

  const onSaveInformation = (id, name) => updateUser({ variables: { id, name });

  return (
    // ... use data.users and onSaveInformation in your JSX
  );
}

Теперь, если имя пользователя изменяется с помощью мутации, Apollo автоматически обновит кэш и вызовет повторное рендеринг компонента.Тогда компонент автоматически отобразит новые данные.Добро пожаловать в силу GraphQL!