Question

我在React应用程序中具有以下结构：

invalid character 'p' looking for beginning of value "

此提供程序使用<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.
}

直到这里一切正常。我的问题是，在此组件内部，我有一个按钮可以在后端更改此对象。

如何再次获取obj？

我当然可以刷新页面，但这是我要避免的解决方案。到目前为止，我尝试过的是：

尝试在const Component = ({id}) => { const { obj } = useSomething() }中再次使用useQuery。

Component

但是实际上我想做的是在State变量更改时触发查询：

 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

解决此挑战的最佳方法是什么？

Answer 1

收到错误消息的原因是，您只能在组件主体中使用钩子，而不能在不是钩子的其他函数中使用，也不能在条件内部使用钩子。您可以在rules of hooks

中了解更多有关此内容的信息。

您可以在useQuery here的文档中阅读，有多种方法可以使数据保持最新或重新获取。

使数据保持最新状态的最简单方法是使用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 }) }, []);

状态变量更改时使用useQuery

1 个答案: