使用 AppSync 的 RTK 查询返回状态“已拒绝”

Question

我正在使用 RTK Query & AppSync (graphQL) 开发一个 React 应用程序。我尝试了如下查询请求，但 redux 状态始终为“rejected” "Cannot read properties of undefined (reading 'filter')"（请检查下面的图片）。

看来请求本身已成功完成（200），所以我猜这是由于 geaphQL 客户端造成的。

没有 RTK 查询的 Redux Toolkit 按预期工作。

请帮忙

RTK查询（拒绝）

import { createApi } from '@reduxjs/toolkit/query/react';
import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query';
import { API } from 'aws-amplify';
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api-graphql/lib/types';
import { listSurveyTitles } from 'src/graphql/queries';
import aws_exports from 'src/aws-exports';

API.configure(aws_exports);

export const surveyTitlesApi = createApi({
  reducerPath: 'surveyTitles',
  baseQuery: graphqlRequestBaseQuery({
    url: '/graphql',
  }),
  endpoints: (builder) => ({
    fetchSurveyTitles: builder.query({
      query: ({ limit = 2147483647, params }) => ({
        document: API.graphql({
          query: listSurveyTitles,
          variables: { limit, ...params },
          authMode: GRAPHQL_AUTH_MODE.API_KEY,
        }),
      }),
    }),
  }),
});

export const { useFetchSurveyTitlesQuery } = surveyTitlesApi;

使用 Redux Toolkit 而非 RTK 进行切片（已完成）

export const fetchSurveyTitles = createAsyncThunk(
  'planner/fetchSurveyTitles',
  async ({ limit = 2147483647, ...params }, thunkAPI) => {
    try {
      return await API.graphql({
        query: listSurveyTitles,
        variables: { limit, ...params },
        authMode: GRAPHQL_AUTH_MODE.API_KEY,
      });
    } catch (e: any) {
      return thunkAPI.rejectWithValue(e);
    }
  }
);

显示两种方法的相同请求负载 (200)

Answer 1

按照您在那里编写的方式，query函数的返回值将被输入到graphqlRequestBaseQuery，后者依次调用graphql-request- 但您已经通过使用 amplify 客户端提出了请求和所有内容。

如果您想使用 amplify 客户端，则不需要 graphqlRequestBaseQuery。

在这种情况下，只需使用queryFn而不是query：

endpoints: (builder) => ({
  fetchSurveyTitles: builder.query({
    async queryFn ({ limit = 2147483647, ...params }) {
      try {
      const data = await API.graphql({
        query: listSurveyTitles,
        variables: { limit, ...params },
        authMode: GRAPHQL_AUTH_MODE.API_KEY,
      });
      // it is important that the object you return either has the form `{data}` or `{error}`
      return { data }
    } catch (error: any) {
      return { error }
    }