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

Question

使用 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 }
        });
...

我在这里遗漏了什么，试图弄清楚这两个钩子有什么不同。

Answer 1

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

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

Answer 2

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

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

Use `useQuery` hook the same way as `useMutation` fails

reactjs

react-hooks

apollo

react-apollo