Используйте useQuery при изменении переменной состояния

Question

У меня есть следующая структура в приложении реакции:

<SomeProvider id={objectId}>
  <SomeApp />
</SomeProvider>

Этот провайдер использует useQuery для извлечения объекта из серверной части. С помощью useContext я делаю его доступным для всех компонентов приложения:

const EventProvider = ({ id, children }) => {
  const {data} = useQuery(SOME_QUERY, { variables: input })
  const obj = data ? data.something : {}

  // etc.
}

export const useSomething = () => {
  // etc.
}

В компоненте я могу иметь доступ к этому объекту:

const Component = ({id}) => {
  const { obj } = useSomething()
}

Пока здесь все не работает. У меня вопрос, внутри этого компонента, у меня есть кнопка, которая изменяет этот объект в бэкэнде.

Как я могу получить объект еще раз?

Я могу, конечно, обновить sh страницу , но это решение, которого я хочу избежать. До сих пор я пробовал:

Попробуйте снова использовать useQuery в Component.

 const Component = ({id}) => {
   const { obj } = useSomething()

   const {data} = useQuery(SOME_QUERY, { variables: input })
      const obj = data ? data.something : {}
 }

Но на самом деле я хотел бы вызвать запрос, когда Изменения переменных состояния:

const Component = ({id}) => {
  const { obj } = useSomething()
  const { isActivated } = useOtherHook()

  const {data} = useQuery(SOME_QUERY, { variables: input })
      const obj = data ? data.something : {}

  useEffect(() => {
    // when isActivated changes, I would like to fetch the obj again
  }, [isActivated])
}

Если я использую useQuery внутри useEffect, я получаю:

Hooks can only be called inside of the body of a function component

Какой наилучший подход для решения этот вызов?

Answer 1

Причина сообщений об ошибках, которые вы получаете, состоит в том, что вы можете использовать только хуки в теле вашего компонента, но не внутри других функций, которые не являются хуками, или внутри условий. Вы можете прочитать больше об этом здесь в правилах хуков

Как вы можете прочитать в документации для useQuery здесь , существует несколько способов хранения данных обновление или повторное получение.

---

Самый простой способ обновления данных - использовать функцию опроса от apollo.

const { loading, error, data } = useQuery(QUERY, {
    variables: input,
    skip: !isActivated,
    pollInterval: 500, // Update every 500ms
  });

---

Один из способов повторного получения по запросу можно использовать возвращаемую функцию refetch.

const { loading, error, data, refetch } = useQuery(/* ... */);
useEffect(() => { refetch() }, [isActivated])

---

В зависимости от ваших потребностей, вы также можете использовать крючок useLazyQuery. Это не извлекает данные при рендеринге, а только при вызове функции. Это наиболее полезно, когда вы хотите запрашивать данные только тогда, когда ввод был установлен или изменен.

const [getData, { loading, data }] = useLazyQuery(QUERY);

useEffect(() => { getData({ variables: input }) }, []);