fix(react-query): ensure mutationKey is an array

[jonathanstanley]

fix: react query is requiring all keys to be an array

Description

Related #7281 react query will require all keys be an array. see: TanStack/query#2919

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

The change is simple and backwards compatible because arrays have always been valid keys.

Checklist:

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 87ff406

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@graphql-codegen/typescript-react-query	Minor

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/theguild/graphql-code-generator/34EkdZ22rJELmy7Mqx7csziyW9ji
✅ Preview: https://graphql-code-generator-git-fork-jonathanstanley-233546-theguild.vercel.app

[dotansimha]

@jonathanstanley thanks !!

can you please run yarn changeset and add a patch fix for this?
Also, can you please try to run yarn generate:examples to regenreate all example files?

^ this should fix ci and we can merge and release

[jonathanstanley]

@dotansimha I completed those commands as you asked. I'm not entirely certain if this should be considered a PATCH or a MINOR. Although the change is backwards compatible with react-query, it is possible some have hardcoded their systems to expect a key of 'myQuery' instead of ['myQuery'].

[charlypoly]

Hi @jonathanstanley

I agree with you, this change might be breaking for people directly on getKey() methods for anything else than passing it to ReactQuery.
Also, the upcoming ReactQuery v4 will introduce many other changes that might ripple in plugin changes that will not be backward compatible.

The best solution here might be to add a new plugin option targetMajorVersion or reactQueryMajor that would behave as a feature flag to enable or not new changes linked to a target major (here: 4).
Your change would be part of the targetMajorVersion >= 4.

WDYT?

[jonathanstanley]

Thanks @charlypoly .

I could see it both ways. A flag to targetMajorVersion would certainly work. In my case, I had some custom hardcoded keys which very easy to recognize and fix. My entire conversion from v3 to v4 was maybe an hour and among the easiest major updates i've dealt with. I haven't seen any other conflicts with this plugin. For those reasons, I lean towards keeping it simple here and just making an appropriate semver change. Perhaps I should just redo the changeset as a minor and we can at least get this part done?

[charlypoly]

@jonathanstanley let's proceed with a minor bump on the plugin

[charlypoly]

@jonathanstanley some tests are failing because snapshots had not been updated 👀

cf: https://jestjs.io/docs/snapshot-testing#updating-snapshots

[jonathanstanley]

can you take it from here? i'm not familiar with this package build/ci processes

[charlypoly]

can you take it from here? i'm not familiar with this package build/ci processes

@jonathanstanley The unit-tests were not updated, cf: 87ff406

The test setup is pretty simple to run locally, you just need to do the following (at the root of the project):

yarn
yarn build
yarn test packages/plugins/typescript/react-query  # will fail
# fix tests
yarn test --updateSnapshot packages/plugins/typescript/react-query
yarn test packages/plugins/typescript/react-query # should pass!

[charlypoly]

Good to go 🚀