Decorate URL with query string

[PavelA85]

I am using the graphql-codegen yarn package to generate React hooks graphql-codegen --config codegen.yml

I want to decorate every GraphQL endpoint call with an operation name, so I can see the operation name in the DevTools console:

My baseApi.ts looks like this:

import { createApi, retry } from '@reduxjs/toolkit/query/react';
import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query';
import { Cookies } from 'react-cookie';
import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient(
  `${process.env.REACT_APP_API_URL}/api/graphql`
);
const cookies = new Cookies();
const token = cookies.get('.AspNetCore.Application.Id');
client.setHeader('authorization', `Bearer ${token}`);
client.setHeader('Content-Type', 'application/json');
client.setHeader('X-Requested-With', 'XMLHttpRequest');

export default client;

const staggeredBaseQuery = retry(graphqlRequestBaseQuery({ client }), {
  maxRetries: 2,
});

export const api = createApi({
  baseQuery: staggeredBaseQuery,
  endpoints: () => ({}),
  keepUnusedDataFor: 5,
  refetchOnMountOrArgChange: false,
});

My generated hook looks like this:

import * as Types from '../graphqlTypes';

import { api } from 'graphql/baseApi';
export type SetPreferenceMutationVariables = Types.Exact<{
  name: Types.Scalars['String'];
  value: Types.Scalars['String'];
}>;

export type SetPreferenceMutation = {
  __typename?: 'Mutation';
  setPreference?: boolean | null | undefined;
};

export const SetPreferenceDocument = `
    mutation setPreference($name: String!, $value: String!) {
  setPreference(name: $name, value: $value)
}
    `;

const injectedRtkApi = api.injectEndpoints({
  endpoints: (build) => ({
    setPreference: build.mutation<
      SetPreferenceMutation,
      SetPreferenceMutationVariables
    >({
      query: (variables) => ({ document: SetPreferenceDocument, variables }),
    }),
  }),
});

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

I found this code: graphql-code-generator/packages/plugins/typescript/rtk-query/src/visitor.ts that generates hooks for me, but I can not find an option to update URL from this hook. I expect to add URL option here: query: (variables) => ({ document: SetPreferenceDocument, variables, url: '????' }), but could not figure out how to do it :( I found this Defining Query Endpoints%2C) but was unable to make it work.

[PavelA85]

any help would be greatly appreciated

[phryneas]

Hmm..

At that point, you could probably just do something like

    ${operationName}: build.query<${Generics}>({
      query: (variables) => ({ document: ${documentVariableName}, variables, param: '${operationName}' })
    }),`);

to change the generated code.

The problem is that it won't "go through", due to this code: https://github.com/reduxjs/redux-toolkit/blob/94d93d969f01ca6248ff481f0c154b43c6e903d3/packages/rtk-query-graphql-request-base-query/src/index.ts#L42-L48

You could do something like

    ${operationName}: build.query<${Generics}>({
      query: (variables) => {
        client.setEndpoint('someNewUrl')
        return ({ document: ${documentVariableName}, variables })
      }
    }),`);

or you copy&paste the graphqlbasequery in your code base and adjust the code to accept some additional param argument.