`使用 graphql、graphql-request 和 React-query 调用 API 时出现错误：无效 AST 节点：{}。`

Question

尝试使用 graphql、graphql-request 和 React-query 的组合访问我的 API 时，出现重复的

Error: Invalid AST Node: {}.

 错误。

这是我正在拨打电话的根应用程序：

import graphqlRequestClient from "./client/graphqlRequestClient";
import { useQuery } from "@tanstack/react-query";
import { graphql } from "./graphql/generated/gql";

import "./App.css";

const getWineTypesDocument = graphql(`
  query GetWineTypes {
    types {
      name
      id
    }
  }
`);

function App() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["types"],
    queryFn: async () => graphqlRequestClient.request(getWineTypesDocument),
  });

  console.log({ data, error, isLoading });

  return (
    <>
      <div>Hello World</div>
    </>
  );
}

export default App;

这是

react-query

 的 

graphqlRequestClient

 配置：

import { GraphQLClient } from 'graphql-request';

const graphqlRequestClient = new GraphQLClient('http://localhost:4000/' as string);

export default graphqlRequestClient;

我还认为 graphql 查询本身存在一些与打字稿相关的错误，这些错误可能相关，也可能不相关：

错误1

错误-2

这是我的

codegen.ts

：

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'http://localhost:4000/',
  documents: 'src/**/*.graphql',
  generates: {
    './src/graphql/generated/': {
      preset: 'client',
      config: {
        documentMode: 'string'
      }
    },
    './schema.graphql': {
      plugins: ['schema-ast'],
      config: {
        includeDirectives: true
      }
    }
  }
}

export default config

最后，来自我的

package.json

的相关版本：

    "@graphql-codegen/cli": "^5.0.2",
    "@graphql-codegen/schema-ast": "^4.1.0",
    "@graphql-codegen/typescript-react-query": "^6.1.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "typescript": "^5.5.4",

我已经对此进行了梳理，据我所知，查询使用了正确的语法，我的 codegen.ts 配置正确，并且我的 graphql 请求客户端也配置正确。真的很难理解这个错误的根源。

Answer 1

我能够通过删除包装查询的

graphql

 函数（在 

getWineTypesDocument

 中）来解决此错误，尽管这是 

react-query 文档所建议的：

const getWineTypesDocument = `
  query GetWineTypes {
    types {
      name
      id
    }
  }
`;

不出所料，这也解决了类型错误。然而，现在我不清楚我是否/如何实际使用

graphql-codegen

 生成的内容。