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

好像useQuery的状态只有responseId：https://github.com/trojanowski/react-apollo-hooks/blob/master/src/useQuery.ts

但是您也可以从refetch获得一个useQuery函数。

 const { loading, error, data, refetch } = useQuery(...);

在使用refetch()更新数据之后，尝试致电useMutation()。它不应触发重新渲染。因此，您可能必须设置自己的状态。也许像这样：

const handleUpdate = () =>{
   setData(refetch());
}

或者，您使用useMutation后也处于以下状态的数据：https://github.com/trojanowski/react-apollo-hooks/blob/master/src/useMutation.ts

  const [update, { data }] = useMutation(UPDATE_DATA);

data将始终是最新值，因此您也可以这样做：

useEffect(()=>{
 setData(data);
 // OR
 // setData(refetch());
}, [data])

Answer 2

因为您不希望仅获取和呈现数据-您希望能够在表单值更改时对其进行更改-我们不能仅仅照原样利用data。除非您使用uncontrolled inputs和引用来管理表单（可能是shouldn't do），否则将需要使用某些组件状态。

我认为您当前的方法大都可以。最大的缺点是，如果查询花费了一段时间（也许用户的互联网连接不正常），则有一个窗口供他们开始填写表格，仅在查询完成后才覆盖其输入。为了避免这种情况，您必须显式禁用输入或隐藏表单，直到加载完成为止。

另一种方法是将您的组件分为两个部分：

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)}/>
}

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

更改通过useQuery

2 个答案: