0

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.

TdeBooij
  • 212
  • 1
  • 2
  • 6

0 Answers0