rtk-query-graphql-request与graphql-request类型不匹配问题求助

问题原因 #

这个类型错误是因为@rtk-query/graphql-request-base-query内部依赖了特定版本的graphql-request，而你项目中安装的graphql-request版本和它内部的版本不一致，导致两个版本的GraphQLClient类型定义冲突（私有属性url的声明不同）。

解决方案 #

1. 统一graphql-request版本 #

先查看@rtk-query/graphql-request-base-query依赖的graphql-request具体版本：

• 打开node_modules/@rtk-query/graphql-request-base-query/package.json，找到dependencies里的graphql-request版本号。

然后安装对应版本的graphql-request到你的项目：

npm install graphql-request@x.x.x

（将x.x.x替换为查到的版本号）

2. 强制统一依赖版本（npm） #

在项目根目录的package.json中添加resolutions字段，强制所有依赖使用同一个graphql-request版本：

"resolutions": {
  "graphql-request": "^x.x.x"
}

添加后重新安装依赖：

npm install

3. 临时类型断言（不推荐） #

如果暂时无法调整版本，可以用类型断言跳过类型检查：

baseQuery: graphqlRequestBaseQuery({ 
  client: new GraphQLClient('http://localhost:4000/graphql') as unknown as import('@rtk-query/graphql-request-base-query/node_modules/graphql-request').GraphQLClient 
}),

额外注意 #

你的getUsers端点写法不符合GraphQL规范，应该使用gql模板字符串定义查询语句，示例：

import { gql } from 'graphql-request';

// ...

endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => ({
      document: gql`
        query GetUsers {
          users {
            id
            name
          }
        }
      `,
    }),
  }),
}),

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