RTK Query with AppSync returns status "rejected" - reactjs

Question

I'm developing a react app using RTK Query & AppSync (graphQL).
I tried a query request as follows, but always the redux status is "rejected" saying "Cannot read properties of undefined (reading 'filter')" (Please check a pic below).
It seems the request itself is successfully done (200), so I guess it is due to the geaphQL client.
Redux Toolkit without RTK Query works as expected.🧐
Please help😭
RTK Query (rejected)
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;
Slice with Redux Toolkit not RTK (fulfilled)
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);
}
}
);
Showing same request payloads for the both approaches (200)

Answer 1

The way you have written that there, the return value of your query function would be fed into graphqlRequestBaseQuery, which in turn calls graphql-request - but you already have made your request and everything by using the amplify client.
If you want to use the amplify client, you don't need the graphqlRequestBaseQuery.
In that case, just use queryFn instead of 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 }
}