rtk-query-graphql-request 和 graphql-request 的类型不匹配答案

【问题标题】：Mismatch of types for rtk-query-graphql-request and graphql-requestrtk-query-graphql-request 和 graphql-request 的类型不匹配
【发布时间】：2022-11-23 01:54:12
【问题描述】：

我正在尝试使用 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)

我在 graphqlRequestBaseQuery 的 **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;

【问题讨论】：

标签： reactjs redux graphql redux-toolkit rtk-query

【解决方案1】：

这是一个使用 @rtk-query/graphql-request-base-query 版本 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: () => ({}),
});

【讨论】：

请详细说明为什么以及如何回答问题
有两个选项可以处理错误。 (1) 从 graphql-request 的 v5.0.0 降级到 v4.3.0，或者 (2) 不使用 GraphQLClient，而是传入“url”。本质上，graphql-request v5.0.0 中的 GraphQLClient 实现存在不匹配。

【解决方案2】：

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

@rtk-query/graphql-request-base-query 在内部从 graphql-request 导入了 GraphQLClient 并且类型不匹配可能是因为依赖项尚未在官方存储库上更新。

希望这可以帮助

【讨论】：