no operationName in query

[JoakimThorne]

Hi,

Im trying to implement hooks using this generator.
I run msw for testing but it cant find the queries correctly since when I generate my hooks and types I dont get a operationName.
So all my queries only fire with the schema and the variables in the body.
msw needs operationName to map the request.

my settings

overwrite: true
schema: 'http://localhost:8080/api/v2/graphql'
documents: 'src/**/*.graphql'
generates:
    src/generated/graphql.ts:
        plugins:
            - 'typescript'
            - 'typescript-operations'
            - 'typescript-react-query'
            - add:
                  content: "import { endpointUrl } from '../graphql-endpoint-config';"
        config:
            exposeQueryKeys: true
            fetcher:
                endpoint: 'endpointUrl'

[dotansimha]

Can you please share more details on msw? And share more details on what's missing? Is it a runtime thing or a bug with codegen output?

[badsyntax]

I'm not the OP but I can give some more context for the reason for operationName (note, everything below is specific to the typescript-react-query generator):

The thing with GraphQL, is that it's kinda hard to stub, because every request to your GraphQL endpoint has exactly the same request method and url, eg: POST /graphql. The only difference between different GraphQL requests is what's in the request body. This is why adding a key called operationName to the request body is a useful approach for identifying requests, so we can stub them. (A bit of info on operationName here: https://graphql.org/learn/serving-over-http/#post-request)

If I could access mutationKey in my mutationFn at runtime, then I could use the mutationKey as my operationName in my mutationFn (the fetcher). Unfortunately we can't access mutationKey in our fetcher, more info about that here: TanStack/query#3504

So it looks like the only way we can add operationName to the GraphQL requests, is to achieve this at build time with the generator tool.

This would be the ideal generated code:

export const useUpdateRoleMutation = <
  TError = ResponseError,
  TContext = unknown
>(
  options?: UseMutationOptions<
    UpdateRoleMutation,
    TError,
    UpdateRoleMutationVariables,
    TContext
  >
) =>
  useMutation<
    UpdateRoleMutation,
    TError,
    UpdateRoleMutationVariables,
    TContext
  >(
    ['UpdateRole'],
    useFetchData<UpdateRoleMutation, UpdateRoleMutationVariables>(
      UpdateRoleDocument,
      'UpdateRole'
    ),
    options
  );

Note that I've introduced a second argument to useFetchData with value 'UpdateRole', which is the generator "operationName".

Now in my fetcher I can access it like so:

export function useFetchData<TData, TVariables>(
  query: string,
  operationName?: string
): (
  variables?: TVariables,
  opts?: {
    signal?: AbortSignal;
  }
) => Promise<TData> {
  return async (variables, opts) => {
    const res = await fetch(config.API.WEB_GRAPHQL_URL as string, {
      method: 'POST',
      body: JSON.stringify({
        query,
        variables,
        operationName,
      }),
      signal: opts?.signal,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    const json = await res.json();

    if (json.errors) {
      const { message } = json.errors[0];

      throw new Error(message);
    }

    return json.data;
  };
}

Does that make sense?