GraphQL Codegen Plugin Setup

[kingkong404]

What codegen plugins would be best to combine with Villus?

For example is it compatible with the output of @graphql-codegen/typescript-vue-apollo

[logaretm]

Unfortunately, I don't think it is compatible with @graphql-codegen/typescript-vue-apollo output

However, we do use the near-operation-preset along with typescript-operation plugin to generate .gql defenitions.

Here is a snippet of the codegen.yml:

schema: https://yourapi.com/graphql
documents:
  - ./graphql/**/*.gql
generates:
  ./graphql-types.gen.ts:
    plugins:
      - typescript
  ./:
    preset: near-operation-file
    presetConfig:
      extension: .gql.d.ts
      baseTypesPath: graphql-types.gen.ts
    plugins:
      - typescript-operations
config:
  addOperationExport: true

Which provides typings for our schema and for the operations we use with graphql-tag.

Here is an example of a query:

import { ProductsQuery, ProductsQueryVariables, Products } from '@/graphql/Product.gql';

const { data, error } = useQuery<ProductsQuery, ProductsQueryVariables>({
  query: Products,
  variables,
});

Maybe in the future, I could implement a plugin to automate this like the one you suggested for vue-apollo but I'm short on time at the moment.