改变使用 useQuery 获取的远程数据的最佳方法是什么

Question

我对 graphQL 和 Apollo 相当陌生。我希望我能清楚地表达自己：

我正在使用 apollo/react-hook 获取数据useQuery。然后，我用数据填充表单，以便客户可以更改它。当他完成后，数据将使用发送回服务器useMutation。

到目前为止，我习惯onCompleted将获取的数据存储在组件状态中。看起来像这样：

import React, { useState } from 'react';
import { TextField } from '@material-ui/core'; 
const Index = () => {
    const [state, setState] = useState(null)
    const {data, loading, error} = useQuery<typeof queryType>(query, {
        onCompleted: data => {
            // modify data slightly
            setState(data)
        }
    })

    return (
        <TextField value={state} onChange={() => setState(event.target.value)}/>
    )
}

然后，表单使用存储在组件状态中的值，并且表单处理程序用来setState 更改它。

我现在的问题是，这是否是最佳实践，以及是否有必要将获取的数据存储在本地组件状态中。

Answer 1

因为您不想只获取和呈现数据 - 您希望能够在表单值更改时改变它 - 我们不能只按原样使用data。除非您使用不受控制的输入和引用来管理表单（您可能不应该这样做），否则您将需要使用某些组件状态。

我认为你目前的做法基本上是好的。最大的缺点是，如果查询需要一段时间（可能用户的互联网连接不稳定），则会有一个窗口让他们开始填写表单，但一旦查询完成，他们的输入就会被覆盖。您必须显式禁用输入或隐藏表单，直到加载完成才能防止出现这种情况。

另一种方法是将组件分成两个：

const Outer = () => {
  const {data, loading, error} = useQuery(query)

  if (!data) {
    return null // or a loading indicator, etc.
  }

  return <Inner data={data}/>
}

const Inner = ({ data }) => {
  const [value, setValue] = useState(data.someField)

  <TextField value={value} onChange={() => setValue(event.target.value)}/>
}

通过在加载完成之前不渲染内部组件，我们确保传递给它的初始 props 具有来自查询的数据。然后我们可以使用这些道具来初始化我们的状态。