rtk-查询-graphql-请求和graphql-请求的类型不匹配

Question

我试图用GraphQL构建rtk查询api。但是，似乎@rtk-query/graphql-request-base-query和graphql-request之间的包类型不匹配，我得到的错误如下；

Type 'import("path/to/file/node_modules/graphql-request/dist/index").GraphQLClient' is not assignable to type 'import("path/to/file/node_modules/@rtk-query/graphql-request-base-query/node_modules/graphql-request/dist/index").GraphQLClient'.
  Types have separate declarations of a private property 'url'.ts(2322)

我得到了**client**字段上的错误，我试图删除node_modules并重新安装，不幸的是没有工作.

这是我的api.ts；

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'; 
import { GraphQLClient } from 'graphql-request';
import { gqlClient } from '../gql/gql-client';

 
export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({ client: new GraphQLClient('http://localhost:4000/graphql') }), // error is at "client" field
  tagTypes: [],
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users',
    }),
  }),
});

export const { useGetUsersQuery } = api;

Answer 1

下面是一个使用@rtk-query/graphql-请求基查询版本2.2.0的示例。

import { createApi } from "@reduxjs/toolkit/query/react";
import { graphqlRequestBaseQuery } from "@rtk-query/graphql-request-base-query";
import { ClientError } from "graphql-request";

import { RootState } from "../store";

const baseUrl = process.env.REACT_APP_TECHNOTES_API_HTTP_GRAPHQL;
const techNotesHttpAPI = baseUrl ? baseUrl : "http://localhost:4001/graphql";

const baseQuery = graphqlRequestBaseQuery<
  Partial<ClientError> & { statusCode: number; error: string }
>({
  url: techNotesHttpAPI,
  prepareHeaders: (headers, { getState }) => {
    const state = getState() as RootState;
    const token = state.auth.token;

    if (token) {
      headers.set("Authorization", `Bearer ${token}`);
    }

    return headers;
  },
  customErrors: ({ name, stack, response }) => {
    const {
      message = "",
      statusCode = 500,
      error = "",
    } = response?.errors?.length
      ? response?.errors[0]?.extensions.response
      : {};

    return {
      name,
      message,
      statusCode,
      error,
      stack,
    };
  },
});

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery,
  tagTypes: ["User", "Note"],
  endpoints: () => ({}),
});

Answer 2

我在遵循代码-gen文档时遇到了同样的问题。为了添加@dwight建议的内容，您还可以复制@rtk-query/graphql-request-base-query包的代码文件并将它们放在项目中。从那里导入graphqlRequestBaseQuery。

@rtk-query/graphql-request-base-query从GraphQLClient内部导入GraphQLClient，类型错配可能是因为依赖关系尚未在官方存储库上更新。

希望这能帮上忙