I'm using Laravel lighthouse to be my graphql server inside my Laravel app. Now I've added custom queries and types to my graphql/schema.graphql file, I want to be able to get typings in my TypeScript Vue 3 app which is located in the Laravel project. However, when I run the graphql-codegen --config codegen.yml command, it fails because the query being generated doesn't match what's in the schema file.

The query in my graphql/schema.graphql file.

type Query {
    posts: [Post!]! @paginate(defaultCount: 10)
}

My Query I call in my Vue component

            {
                posts {
                    data {
                        uuid
                        body
                        user {
                            name
                        }
                    }
                }
            }

The code below is my codegen.yml file

overwrite: true
schema: "./graphql/schema.graphql"
documents: "./resources/js/pages/**/*.vue"
generates:
  ./resources/js/generated.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-vue-apollo-smart-ops"

Any ideas where I need to point it to or how I get graphql-codegen to generated the correct typings?

CodePudding user response：

Your source schema is transformed by directives such as @paginate. Use the following artisan command to generate a single file that contains your entire and final schema:

php artisan lighthouse:print-schema

See https://lighthouse-php.com/master/api-reference/commands.html#print-schema