使用 `useQuery` 钩子与 `useMutation` 失败的方式相同

如何解决使用 `useQuery` 钩子与 `useMutation` 失败的方式相同

使用 React 和 Apollo React 钩子

import { useCallback,useState } from "react";
import { useMutation,useSubscription,useQuery } from "@apollo/react-hooks";

我得到了一个函数 useChannel，其中我的所有 graphql 突变都有钩子。每个突变都被导入，然后被声明为一个常量，如下所示：

const [addExportChannel] = useMutation(AddExportChannelMutation);

我像这样在钩子的返回函数中消费

  const onAddImportChannel = useCallback(
    async (props) => {
      try {
        const data = await addImportChannel({
          variables: {
            shopId,name: props.name,url: props.url,filetype: props.filetype
          }
        });
...

当我尝试对 useQuery 做同样的事情时，它失败说 useQuery 不可迭代。 TypeError: useQuery is not a function or its return value is not iterable

 const [FeedProcess] = useQuery(GetFeedProcessQuery);
...
 const onFeedProcess = useCallback(
    async (props) => {
      try {
        const data = await FeedProcess({
          variables: { shopId,FeedId: props.FeedId }
        });
...

我在这里错过了什么，试图找出两个钩子有什么不同。

解决方法

因为 useQuery 被立即调用，所以不能像这样存储它 (const [FeedProcess] = useQuery(GetFeedProcessQuery);)。但是 apollo 有可以像您一样存储的 useLazyQuery。如果您想稍后存储和调用它，请改用 useLazyQuery。

你应该像这样从 useQuery 钩子解构道具：

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