RTK Query with AppSync returns status "rejected"

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)

If you were able to get this working, would you mind sharing an example of the code? I could especially use help with the query section. Trying ```query: graphqlOperation(etc...)``` throws a type conflict and I'm not sure how to resolve it. — Case Silva, Oct 26 '22 at 17:15

phry · Accepted Answer · 2022-10-26T18:09:20.487

5

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 }
    }

edited Oct 26 '22 at 18:09

answered Jun 24 '22 at 05:17

phry

35,762
5
67
81

Thank you, but I cannot find where to replace in my code. Would you show me the code? – Yozz Jun 24 '22 at 06:42
I added a few more lines of context – phry Jun 24 '22 at 07:07
1

Thanks! I managed to get the expected result!! I messed this in the instruction. https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-queries-with-queryfn – Yozz Jun 24 '22 at 07:28
Would you be willing to provide a full example of this working (preferably in typescript)? I've been struggling to find full examples of this and I too need to hook up my apiSlice with AWS using the API/graphql methods and documentation/examples have been very hard to find. What has happened to the baseQuery in the above example? What is the structure of the query (listSurveyTitles above)? I get a type conflict with ```query: graphqlOperation(etc...)```. What does the calling of the endpoint look like in practice? It would be great to have a full example to refer to with this. – Case Silva Oct 26 '22 at 16:59
Also, is the fat arrow supposed to be there in ```async queryFn ({ limit = 2147483647, ...params }) => {``` ? It seems to throw an error for me. – Case Silva Oct 26 '22 at 17:06
1

@CaseSilva if you want to use graphql, you don't need queryFn, there is a graphql client and even a codegen integration for RTK Query. [example application](https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react/graphql-codegen) – phry Oct 26 '22 at 18:10
@phry Well I need to use AWS's API.graphqlOperation functions and I was under the impression that that's what queryFn was for...Was I wrong on that? – Case Silva Oct 26 '22 at 18:53
@CaseSilva for third-party function calls, yes. I answered you on Github. Generally: it's your job to provide a complete non-working example, I will point out how to fix it. Pulling a complete working example out of a hat if I don't know what you are doing is nothing I will do in a comment to another person's question. – phry Oct 26 '22 at 20:18

RTK Query with AppSync returns status "rejected"

1 Answers1