使用 useQuery、useMutation 和重新获取回调后无法重新获取数据

Question

我有一个标准组件设置，其中一个组件用于查询数据，还有一个模态表单在提交时改变输入的数据。 useQuery 挂钩使用 onCompleted 回调设置状态。我还在我的 useQuery 挂钩中添加了一个 refetch 回调，将它传递给表单模式并在 useMutation 挂钩中调用它 onCompleted 。我无法在不刷新页面的情况下立即呈现数据。

查询：

 const {
    loading: childProfilesLoading,
    error: childProfilesError,
    refetch: refetchChildProfiles,
  } = useQuery<any>(GET_CHILD_PROFILES, {
    notifyOnNetworkStatusChange: true, // I was told this might help
    variables: { value: 5 },
    onCompleted: (childProfilesData) =>
      setChildProfiles(childProfilesData?.childProfiles),
  })

和模态形式的突变：

  const [
    createChildProfile,
    { error: createProfileError, loading: createProfilePending },
  ] = useMutation<any>(CREATE_CHILD_PROFILE, {
    onCompleted: () => refetchChildProfiles(),
  })

这不会将新数据添加到状态中的父数据，也不会重新迭代：

 {!!childProfiles.length && (
            <TouchableOpacity onPress={() => setShowModal(!showModal)}>
              <Text style={styles.createText}>+ Add child</Text>
            </TouchableOpacity>
          )}
    // ....more jsx data here

Answer 1

似乎与 https://github.com/apollographql/react-apollo/issues/3709 有关。

作为解决方法，您可以使用 useEffect 来依赖查询的 data 属性：

const {
    loading: childProfilesLoading,
    error: childProfilesError,
    refetch: refetchChildProfiles,
    data: childProfilesData,
  } = useQuery<any>(GET_CHILD_PROFILES, {
    notifyOnNetworkStatusChange: true, // I was told this might help
    variables: { value: 5 },
  })

useEffect(() => {
   setChildProfiles(childProfilesData?.childProfiles),
}, [childProfilesData, setChildProfiles])

或者更好的是，直接使用 data 属性而不是将其存储在另一个状态中。

使用 useQuery、useMutation 和重新获取回调后无法重新获取数据

Unable to refetch data after mutation with useQuery, useMutation and refetch callback

jquery

reactjs

apollo-client

graphql-mutation