feat(react-query): add @reactQueryKey directive to override generated react-query key

[sciyoshi]

Description

Adds a @reactQueryKey directive on QUERY which allows customizing the generated key.

Related #8113

Type of change

• [x] New feature (non-breaking change which adds functionality)
• [x] This change requires a documentation update

How Has This Been Tested?

Adds a test to make sure the generated key is correct.

Checklist:

• [x] I have followed the CONTRIBUTING doc and the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 7d929d650cca6efde8f081a02204db84c9689814

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

@sciyoshi is attempting to deploy a commit to the The Guild Team on Vercel.

A member of the Team first needs to authorize it.

[spsaucier]

@charlypoly I understand your reasoning for not wanting to mix configuration, but as it stands today, the mismatch of query keys between queries and their mutations is a big reason not to use the auto-generated react-query hooks.

Invalidation after mutation becomes much more difficult and error-prone, and as far as I can tell, there is no workaround for this problem. We have to do something like this:

  const queryClient = useQueryClient();
  const thingsKey = useGetThings.getKey();
  const { mutate } = useRemoveOneThing({
    onSuccess: (data) => {
      queryClient.setQueriesData(thingsKey, data);
    },
  });

Avoiding this by mixing configuration would be a compromise that is well-worth it, in my opinion.

Or do you have another solution in mind for this problem?

[charlypoly]

@spsaucier, actually, we will encourage people soon to not use generated hook-based plugins but instead rely on our gql-tag-operations-preset (soon to be renamed) that provides better integration with most frameworks (React Query included); you will an RQ example here: https://github.com/dotansimha/graphql-code-generator/tree/examples-front-end/examples/front-end/react/tanstack-react-query

[spsaucier]

Thanks, then I look forward to seeing what that entails practically as soon as it's ready. As it stands, I'm not sure what's being auto-generated in that example.

[charlypoly]

Thanks, then I look forward to seeing what that entails practically as soon as it's ready. As it stands, I'm not sure what's being auto-generated in that example.

Hi @spsaucier,

In the aforementioned example, the content of src/gql folder is generated. Is provided a typed graphql() function that needs to be used to define GraphQL operations and fragments as follows:

import React from 'react';
import request from 'graphql-request';
import './App.css';
import Film from './Film';
import { gql } from './gql/gql';
import { useQuery } from '@tanstack/react-query';

const allFilmsWithVariablesQueryDocument = gql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem
        }
      }
    }
  }
`);

function App() {
  // here, `useQuery` returns a typed `data` object, thanks to `graphql-request` support for typed graphql document (here: `allFilmsWithVariablesQueryDocument`)
  const { data } = useQuery(['films'], async () =>
    request('https://swapi-graphql.netlify.app/.netlify/functions/index', allFilmsWithVariablesQueryDocument, {
      first: 10,
    })
  );

  return (
    <div className="App">
      {data && <ul>{data.allFilms?.edges?.map((e, i) => e?.node && <Film film={e?.node} key={`film-${i}`} />)}</ul>}
    </div>
  );
}

[charlypoly]

Hi!

All community plugins (see list below) have been moved to a new dotansimha/graphql-code-generator-community.

Community plugins:

• @graphql-codegen/typescript-react-apollo
• @graphql-codegen/typescript-graphql-request
• @graphql-codegen/typescript-apollo-angular
• @graphql-codegen/typescript-apollo-client-helpers
• @graphql-codegen/typescript-react-query
• @graphql-codegen/typescript-urql
• @graphql-codegen/named-operations-object
• @graphql-codegen/urql-introspection
• @graphql-codegen/flow-resolvers
• @graphql-codegen/typescript-vue-apollo
• @graphql-codegen/typescript-rtk-query
• @graphql-codegen/flow-operations
• @graphql-codegen/typescript-msw
• @graphql-codegen/typescript-mongodb
• @graphql-codegen/typescript-type-graphql
• @graphql-codegen/jsdoc
• @graphql-codegen/typescript-vue-urql
• @graphql-codegen/kotlin
• @graphql-codegen/typescript-vue-apollo-smart-ops
• @graphql-codegen/java
• @graphql-codegen/c-sharp-operations
• @graphql-codegen/hasura-allow-list
• @graphql-codegen/typescript-stencil-apollo
• @graphql-codegen/relay-operation-optimizer
• @graphql-codegen/typescript-oclif
• @graphql-codegen/java-resolvers
• @graphql-codegen/java-apollo-android
• @graphql-codegen/flutter-freezed

Please move your PR by following these steps:

From your current PR branch:

• Fork the https://github.com/dotansimha/graphql-code-generator-community repository
• git remote add codegen-community <GIT_URL_OF_YOUR_COMMUNITY_REPO_FORK>
• git fetch codegen-community
• git push codegen-community

Open the PR on dotansimha/graphql-code-generator-community and close this PR.

Thank you!

[spsaucier]

@dotansimha Can we merge this to make the existing version more flexible until the updates that @charlypoly mentioned are ready?

[coopbri]

I echo @spsaucier's sentiment -- it would be cool to have this baked into the library as a temporary solution, currently working around it by fetching with manually-created hooks/factories and composing the generated query keys.

I would love if we could leverage the existing React Query custom UseQueryOptions.queryKey/UseInfiniteQueryOptions.queryKey parameter (if specified, overriding the generated key), but I understand that might be out of scope.

[saihaj]

Hey! this plugins has moved to our community repo https://github.com/dotansimha/graphql-code-generator-community/tree/main/packages/plugins/typescript/react-query

Please move your PR by following these steps:

From your current PR branch:

• git remote add codegen-community [email protected]:dotansimha/graphql-code-generator-community.git
• git fetch codegen-community
• git push codegen-community

Open the PR on dotansimha/graphql-code-generator-community and close this PR.

Thank you!