使用@apollo/client的useQuery时出现GraphQL DocumentNode错误求助

问题根源 #

你定义的categoriesQuery是一个包含query字段的对象，但useQuery的第一个参数要求直接传入GraphQL DocumentNode实例（即gql标签编译后的结果），而非包裹它的对象。这就是为什么该查询在getStaticProps中可用——因为服务端调用apolloClient.query()时，你是将categoriesQuery.query传给了配置的query字段，而组件中直接传递整个对象导致类型不匹配。

解决方法 #

方案一：直接导出DocumentNode（推荐）

修改查询文件，去掉外层对象，直接导出gql编译后的结果：

// @/gqlQueries/categories.js
import {gql} from "@apollo/client";

const categoriesQuery = gql`
    query {
        mainPage(id:"5wrEkvwy8F87kF5d6WQxCL") {
            featuredCategoriesCollection {
                items {
                    metaTitle
                    metaDescription
                    title
                    description
                    image {
                        url
                    }
                    bg
                    slug
                }
            }
        }
    }
`;

export default categoriesQuery;

组件中正常使用：

import categoriesQuery from "@/gqlQueries/categories";
import {useQuery} from "@apollo/client";

const CategoryProduct = ({ updateProductCategory }) => {
    const { data, loading, error } = useQuery(categoriesQuery)
    // 后续业务逻辑
}

方案二：保留原结构，传递对象的query字段

如果需要保留原查询对象的结构（比如复用其他配置项），组件中传入对象的query属性即可：

import categoriesQuery from "@/gqlQueries/categories";
import {useQuery} from "@apollo/client";

const CategoryProduct = ({ updateProductCategory }) => {
    const { data, loading, error } = useQuery(categoriesQuery.query)
    // 后续业务逻辑
}

补充说明 #

你在getStaticProps中能正常使用的原因是：服务端的apolloClient.query()方法接收的是一个配置对象，其中query字段才是需要的DocumentNode，你之前的写法应该类似这样：

export async function getStaticProps(context) {
  const { data } = await apolloClient.query({
    query: categoriesQuery.query // 这里正确取到了DocumentNode
  });
  return { props: { data } };
}

内容的提问来源于stack exchange，提问作者harutyunyan29