question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RTKQ with graphql-codegen weird error

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:19 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
nenadfilipoviccommented, Jun 24, 2021

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.

0reactions
nenadfilipoviccommented, Jun 24, 2021

When I first tried it didn’t fail but now with clear cache and cookies it does fail in codesandbox. Ok will report there, thanks for help 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

GraphQL error message issue #2445 - GitHub
I am using GraphQL api's and Code generator (which automatically generates queries and mutations). Error return from the backend in Network: `{" ...
Read more >
Code Generation - Redux Toolkit
We provide a Plugin for GraphQL Codegen. You can find the documentation to that on the graphql-codegen homepage.
Read more >
Redux Toolkit 1.6.0 - new RTK Query data caching API! - Reddit
OpenAPI/GraphQL code-gen. RTKQ can completely eliminate all the hand-written data fetching logic in your Redux apps - no more writing thunks ...
Read more >
How to handle error format in Redux-toolkit rtk-query graphql ...
I use graphql-codegen to generate the reducers starting from the graphql schema and everything working as expected. Now i have a problem to ......
Read more >
React Native + Hasura + RTK Query + GraphQL Codegen
GraphQL Codegen :https://www. graphql -code-generator.com/RTK ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found