I'm using typescript-vue-urql to generate some awesome composition functions for my graphql queries. This is my codegen.ts
const config: CodegenConfig = {
schema: "https://myschema.com",
documents: ["**/*.graphql"],
ignoreNoDocuments: true,
generates: {
"graphql/generated/types.ts": {
config: { avoidOptionals: true },
plugins: ["typescript"],
},
"graphql/generated/operations.ts": {
plugins: ["typescript", "typescript-operations", "typescript-vue-urql"],
},
},
};
Which will generate types a useMyQuery()
function for each of my .graphql queries. Awesome!
The issue however is that the query results are anonymously typed.
const { data } = useMyQuery()
In this example, data.value
will be typed as follows:
myQuery: {
__typename?: "MyQueryEntity" | undefined;
id: string;
name: string;
url: string
} | null | undefined
Instead of just being a MyQueryEntity (or fragment). This makes it impossible to use the type as a child component prop, without either manually casting the type or hand-copying all the properties in the child component prop.
Is there any way I can have graphql codegen operations return named types instead of these anonymous ones?
Thanks in advance.