dotansimha / dotansimha/graphql-code-generator-community
[typescript react-query] vue-query not compatible since 6.0.0 and tanstack v5
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 195
- Avg merge
- 6h 20m
- Merged PRs (30d)
- 16
Description
### Which packages are impacted by your issue?
_No response_
### Describe the bug
Until now you could replace @tanstack/react-query by @tanstack/vue-query and the plugin would work seamlessly.
Following the support of Tanstack v5 through this [change](https://github.com/dotansimha/graphql-code-generator-community/pull/434) this is not possible anymore as typescript is not resolving query options correctly.
The problem is a combination of the introduction of :
`options?: Omit<${query.getOptions()}<${operationResultType}, TError, TData>, 'queryKey'> & { queryKey?: ${query.getOptions()}<${operationResultType}, TError, TData>['queryKey'] }`
from the codegen plugin
and changes made to UseQueryOptions in @tanstack/vue-query.
[Here](https://www.typescriptlang.org/play?ts=5.3.2#code/FDCWDsBcFMCcDMCGBjaACAStA5qAzjLGgN7AC+IkAngA7oAi0SArgDaQCissA9kQLyYc+QmmgAPGOAAmeEsDSK00pojadufAFxoI8OGgAqXXrADc5NAH4jJvmh13zlWugCKzOFQDS0KmkEsRGkecFYqAEFuRCoAHmZwAGtwHgB3cAA+CxVkVkRYdGRQgiF4AGUqAFsAIx5WHQTQAEdPNDwq2tYLMCg4JFRS2MMAtERwKgz5JTQAN0RWTx1DC2mAegAqdYVp9aNXZVB4fQKoUERIe1DwgDptpV2AdXRwaGhpNEgAC3wPnjRq9AQNA0ZjVVigZDKa6QOTVZiQZShADkCNSYwRoARFzanzSaGYNF04DQAEl6Bw7opdmoLkVKjRWNAYAAaNp-VLoZh4dCIYGwUBzGBoCo1OpEgjQYK3aZodarSkAbSw5Q6dQAujpILBPBYKNQ6GgAAr8yqYgXoQQEfngbBoAA+aHAzBqBgdtTqkuJbtAuCg9raqtY-oSKngEDe-qdrC6LgNAFkYgDlUNJoEmCn-ctgPr0ABVcCpWCIGgAGUl8BGxtApsg5v9ADEEsha6F-fRzugHU5-VhsBxxISHQmaLExlRWWPJg6nohEsPR+MJ+Mp8KmQuJv6Z4kymvJ9loLl8oVigiyp95qw0sqE7BEnAGuBmq12qKY9n9meL1f08NBJORsmhiTAAZFMSgKp+0bfvAN53rAapWJq2rQLqFg5mgABCiDcoYrhyJaWoQLaDpOi6RBujwHpjBYEg0HwGK9AgKDoMq+aFsWWGgKwuF0HIpAUDkeQFGgRTgCUGCIKkIqdA+T7oC+nT7oewmiSUkGXqkQTNuasH3vij4tPJgbdOhbFFjQyplNWDLQBmgjDBIUiyGgjbgNprYOlhOF4T2TC+fAZkcYgXE8dAeAKneVA8BWrEFuZnHcXhar+qQ0xKpJ0nqohHzIbq1hGA4BWOdAMhyPOegGN4rIVUQABqkw2POVVoIFFlMFZ9KMrE9WTEsYiSCVzlbuV4DHGgzU1Wg9X5cNxaxM1rWWdZXU9YVDkDaVq6QLEk3TTYO7bYt7XLbZq19cVm1bgdO2jQYe1oFda5HeUJ3dRkvVFRtzlBCEYSRNEcT-jYqXgd4RJoJF0VGBqLVxcWS2dbZhgKt4apZJY51fXIPDVAAVgeCKgSDigQeeUGaZK2kzNAunwdlLzU84ZD5cTaAKoa4OQxWhgwxzF3OQpYo2MjhrJToz1DOzaN5Us3S0fRHz7BLQEjOtTlyOp0E3WN921Wt-Xq4Mu0NbD7FtS9iNvYVz0dTZKYmfsjDQDQyupp9hutWWiAVsL+v83IyaTbmJtOy7cPm7Ewd+1jJDM8DirGjwdCwNQnN+FDPM6KHyvs7wyfUNLGOm+ZgEZLG6AJlQSZMKHdloJX1fwEMBuDXIrnucSvuY4bOP482LMJ3ncCp0CXPQzoDfQMqtci0PKdUIXzNLOj6GT8qADysAAOJMoQddrz+K4ABRHwAlAEkyGKfaH7A8mKfFgLSgAU0hDKyYP+xD6fc27wxE4qAB9cGqMdDEDIKhEAEBCD9HcJ4WAVB17VG5LARm68aAtjEkMDwXh6zgHbJAXkggEjJDSOAVkxhNACDQIwFg7AnDkPwYQow2D4G4MYeQlhVBGGq04Ww84iAOFwJ8H4Fum1OG+H8IIcRfhyGGkQNgaAciiyVBGAzOAkxP6cLQRgvAWChF8IIeQ+hzChHsJMV4CRsj5GKPyIgSokxWYEHmNAQw1ZoD02dACJmkDGIwLQFo9BoBih6JwXg-hIxiEpHSEYyhIwaFqDoZQhh4T7K8LCYY8x8CJGiOctIyR-ihGWKMHIhRSi7GqOgIzBxlJDJZL8NlQweTdQ+OgcxNAO9IC5mQZwkg+JkHZWII6Ox0AdBWiImgZmFB3wGi6dAAJOiQmsPSUwyJpCYmmDiaodQxjDDcNSfo5ZgivB7MyVQAxAjTnZM0YUkRUibkbkEAfJurNc5J2Hv4Ue38CleEQcg1BgTgmNIOWYihphkkZKBcc-hRy6kTF5nPVOn8kS1LOeAJE+UtFILgP8hZkKlkgp2SCzhZjs7h0Ank96rz84L0KonalOS5BIhKogMEbx0WNUTFPJgm8Ol70xX8uA2igmYLxaiglSSjBEtMdCy5fgMhUveWjQqTza53y+I-Zgz83ixH5diwVAKRVpPFWCyVMrRVSosXK1kyL7lInlXSxV6MyDo2megIVxQd4vCLDAaQoURjrxrJHbk8zhW6I6bM2AnDWSrOie0pkEbOEZGtSiiRdq0BEzQCm+pOgxwTJAKpBEScdE6HdWJT1cAOy+v2IIRxBDGSuMqCMtAABWWUaAABsAAGNtABGTt-bmTkGAEAA) is a minimal reproduction of the typing problem.
I will try to get a code reproduction if needed
### Your Example Website or App
https://www.typescriptlang.org/play?ts=5.3.2#code/FDCWDsBcFMCcDMCGBjaACAStA5qAzjLGgN7AC+IkAngA7oAi0SArgDaQCissA9kQLyYc+QmmgAPGOAAmeEsDSK00pojadufAFxoI8OGgAqXXrADc5NAH4jJvmh13zlWugCKzOFQDS0KmkEsRGkecFYqAEFuRCoAHmZwAGtwHgB3cAA+CxVkVkRYdGRQgiF4AGUqAFsAIx5WHQTQAEdPNDwq2tYLMCg4JFRS2MMAtERwKgz5JTQAN0RWTx1DC2mAegAqdYVp9aNXZVB4fQKoUERIe1DwgDptpV2AdXRwaGhpNEgAC3wPnjRq9AQNA0ZjVVigZDKa6QOTVZiQZShADkCNSYwRoARFzanzSaGYNF04DQAEl6Bw7opdmoLkVKjRWNAYAAaNp-VLoZh4dCIYGwUBzGBoCo1OpEgjQYK3aZodarSkAbSw5Q6dQAujpILBPBYKNQ6GgAAr8yqYgXoQQEfngbBoAA+aHAzBqBgdtTqkuJbtAuCg9raqtY-oSKngEDe-qdrC6LgNAFkYgDlUNJoEmCn-ctgPr0ABVcCpWCIGgAGUl8BGxtApsg5v9ADEEsha6F-fRzugHU5-VhsBxxISHQmaLExlRWWPJg6nohEsPR+MJ+Mp8KmQuJv6Z4kymvJ9loLl8oVigiyp95qw0sqE7BEnAGuBmq12qKY9n9meL1f08NBJORsmhiTAAZFMSgKp+0bfvAN53rAapWJq2rQLqFg5mgABCiDcoYrhyJaWoQLaDpOi6RBujwHpjBYEg0HwGK9AgKDoMq+aFsWWGgKwuF0HIpAUDkeQFGgRTgCUGCIKkIqdA+T7oC+nT7oewmiSUkGXqkQTNuasH3vij4tPJgbdOhbFFjQyplNWDLQBmgjDBIUiyGgjbgNprYOlhOF4T2TC+fAZkcYgXE8dAeAKneVA8BWrEFuZnHcXhar+qQ0xKpJ0nqohHzIbq1hGA4BWOdAMhyPOegGN4rIVUQABqkw2POVVoIFFlMFZ9KMrE9WTEsYiSCVzlbuV4DHGgzU1Wg9X5cNxaxM1rWWdZXU9YVDkDaVq6QLEk3TTYO7bYt7XLbZq19cVm1bgdO2jQYe1oFda5HeUJ3dRkvVFRtzlBCEYSRNEcT-jYqXgd4RJoJF0VGBqLVxcWS2dbZhgKt4apZJY51fXIPDVAAVgeCKgSDigQeeUGaZK2kzNAunwdlLzU84ZD5cTaAKoa4OQxWhgwxzF3OQpYo2MjhrJToz1DOzaN5Us3S0fRHz7BLQEjOtTlyOp0E3WN921Wt-Xq4Mu0NbD7FtS9iNvYVz0dTZKYmfsjDQDQyupp9hutWWiAVsL+v83IyaTbmJtOy7cPm7Ewd+1jJDM8DirGjwdCwNQnN+FDPM6KHyvs7wyfUNLGOm+ZgEZLG6AJlQSZMKHdloJX1fwEMBuDXIrnucSvuY4bOP482LMJ3ncCp0CXPQzoDfQMqtci0PKdUIXzNLOj6GT8qADysAAOJMoQddrz+K4ABRHwAlAEkyGKfaH7A8mKfFgLSgAU0hDKyYP+xD6fc27wxE4qAB9cGqMdDEDIKhEAEBCD9HcJ4WAVB17VG5LARm68aAtjEkMDwXh6zgHbJAXkggEjJDSOAVkxhNACDQIwFg7AnDkPwYQow2D4G4MYeQlhVBGGq04Ww84iAOFwJ8H4Fum1OG+H8IIcRfhyGGkQNgaAciiyVBGAzOAkxP6cLQRgvAWChF8IIeQ+hzChHsJMV4CRsj5GKPyIgSokxWYEHmNAQw1ZoD02dACJmkDGIwLQFo9BoBih6JwXg-hIxiEpHSEYyhIwaFqDoZQhh4T7K8LCYY8x8CJGiOctIyR-ihGWKMHIhRSi7GqOgIzBxlJDJZL8NlQweTdQ+OgcxNAO9IC5mQZwkg+JkHZWII6Ox0AdBWiImgZmFB3wGi6dAAJOiQmsPSUwyJpCYmmDiaodQxjDDcNSfo5ZgivB7MyVQAxAjTnZM0YUkRUibkbkEAfJurNc5J2Hv4Ue38CleEQcg1BgTgmNIOWYihphkkZKBcc-hRy6kTF5nPVOn8kS1LOeAJE+UtFILgP8hZkKlkgp2SCzhZjs7h0Ank96rz84L0KonalOS5BIhKogMEbx0WNUTFPJgm8Ol70xX8uA2igmYLxaiglSSjBEtMdCy5fgMhUveWjQqTza53y+I-Zgz83ixH5diwVAKRVpPFWCyVMrRVSosXK1kyL7lInlXSxV6MyDo2megIVxQd4vCLDAaQoURjrxrJHbk8zhW6I6bM2AnDWSrOie0pkEbOEZGtSiiRdq0BEzQCm+pOgxwTJAKpBEScdE6HdWJT1cAOy+v2IIRxBDGSuMqCMtAABWWUaAABsAAGNtABGTt-bmTkGAEAA
### Steps to Reproduce the Bug or Issue
Generate with codegen
Replace react-query by vue-query
Use options in a generated custom useQuery hook
Correct options object is considered invalid by typescript
### Expected behavior
query options like
{
staleTime: 60,
}
should be valid (typescript)
### Screenshots or Videos
_No response_
### Platform
- OS: [e.g. macOS, Windows, Linux]
- NodeJS: [e.g. 18.5.0]
- `graphql` version: [e.g. 16.3.0]
- `@graphql-codegen/*` version(s): [e.g. 2.6.2]
### Codegen Config File
plugins: ['typescript', 'typescript-operations', 'typescript-react-query'],
config: {
reactQueryVersion: 4,
useTypeImports: true,
addInfiniteQuery: true,
exposeDocument: true,
exposeQueryKeys: true,
exposeFetcher: true,
skipTypename: true,
maybeValue: 'T | undefined',
},
### Additional context
_No response_
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the TypeScript playground reproduction linked in the issue and compare the generated options type with vue-query's UseQueryOptions. The issue points to the typescript-react-query plugin and its generated custom useQuery hook; reproduce the reported invalid-options error, then verify that `{ staleTime: 60 }` is accepted when using vue-query.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100