redux-toolkit: RTKQ with graphql-codegen weird error

I am using standard api:

const api = createApi({
  baseQuery: graphqlRequestBaseQuery({
    url: '/graphql',
  }),
  endpoints: () => ({}),
});

standard store:

const store = configureStore({
  reducer: {
    map: mapReducer,
    deviceDetails: deviceDetailsReducer,
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

Classic redux implementation:

 <ReduxProvider store={store}>
      <NextAuthProvider session={pageProps.session}>
        <Component {...pageProps} />
      </NextAuthProvider>
 </ReduxProvider>

Also I am using graphql-codegen plugin for rtk-query, by @phryneas.

Here is generated endpoint:

import * as Types from '../../../graphql/generated/client/typegen';

import { api } from 'src/services/api';
export type CreateDeviceMutationVariables = Types.Exact<{
  allow: Types.Scalars['Int'];
  access: Types.Scalars['Int'];
  name: Types.Scalars['String'];
  metadata?: Types.Maybe<Types.Scalars['Json']>;
  elevation?: Types.Maybe<Types.Scalars['Int']>;
  latitude: Types.Scalars['Float'];
  longitude: Types.Scalars['Float'];
  desciption?: Types.Maybe<Types.Scalars['String']>;
}>;

export type CreateDeviceMutation = { __typename?: 'Mutation' } & Pick<
  Types.Mutation,
  'createDevice'
>;

export const CreateDeviceDocument = `
    mutation createDevice($allow: Int!, $access: Int!, $name: String!, $metadata: Json, $elevation: Int, $latitude: Float!, $longitude: Float!, $desciption: String) {
  createDevice(
    input: {name: $name, allow: $allow, access: $access, latitude: $latitude, metadata: $metadata, elevation: $elevation, longitude: $longitude, description: $desciption}
  )
}
`;

const injectedRtkApi = api.injectEndpoints({
  endpoints: (build) => ({
    createDevice: build.mutation<
      CreateDeviceMutation,
      CreateDeviceMutationVariables
    >({
      query: (variables) => ({ document: CreateDeviceDocument, variables }),
    }),
  }),
});

export { injectedRtkApi as api };
export const { useCreateDeviceMutation } = injectedRtkApi;

Here is error video: https://webmshare.com/play/BeOB4

If I comment out reducer from store app works again.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 19 (8 by maintainers)

Most upvoted comments

I will try now in codesandbox and report, it is not crucial because I can use it without this package but it will be nice to find where problem is.