I'm currently developing a Vue project that involves using urql and graphql-codegen.
When utilizing useQuery() in urql, it allows for the use of Vue reactive variables to make the query reactive and update accordingly when the variables change.
The issue arises with graphql-codegen generating types that only accept scalars (e.g., string) for the variables parameter. This causes TypeScript errors when trying to use different types such as Ref.
This is an excerpt from my codegen.ts file:
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
schema: 'http://localhost:5001/graphql',
documents: ['src/**/*.vue', 'src/**/*.ts'],
ignoreNoDocuments: true,
generates: {
'./src/gql/': {
preset: 'client',
config: {
useTypeImports: true,
scalars: {
CustomDate: 'string',
ObjectID: 'string',
},
},
plugins: [],
},
},
};
export default config;
One of the generated variable types looks like this:
export type Scalars = {
String: string;
ObjectID: string;
};
export type GetItemQueryVariables = Exact<{
_id: Scalars['ObjectID'];
}>;
A potential scenario might be:
const id = ref('123');
const queryResult = useQuery({
query: queryGQL,
variables: { _id: id },
});
Attempting to assign a Ref<string> to a string results in a type mismatch error.
Is there a way to configure graphql-codegen to resolve this issue? Alternatively, are there methods to automatically modify the generated TypeScript definitions to address this problem?