Apollo client for angular: code generation from graphql files

Question

I came to know about angular graphql code generator from here. I am trying to use it in my project to generate the graphql types and Query services for angular.

My codegen.yml file looks like below.

overwrite: true
schema: "http://localhost:9010/myGraphQL"
documents: "apps/myGraphQLApp/src/gqls/**/*.graphql"
generates:
  apps/myGraphQLApp/src/app/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"

I have a graphql file apps\myGraphQLApp\src\gqls\myBooks.graphql with following content

query GetMyBooks {
  books{
    id
    name
  }
}

I am running npx graphql-codegen --config codegen.yml, and it fails with following error.

  √ Parse configuration
  > Generate outputs
    > Generate apps/myGraphQLApp/src/app/generated/graphql.ts
      √ Load GraphQL schemas
      √ Load GraphQL documents
      × Generate
        → Query root type must be provided.


 Found 1 error

  × apps/myGraphQLApp/src/app/generated/graphql.ts
    Error: Query root type must be provided.
        at assertValidSchema (....\node_modules\graphql\type\validate.js:71:11)
        ...

My graphql server definitely exposes a query root, and I can invoke it with different clients.

schema {
  query: MyGraphQLQueryType
}

I am not sure what I am doing wrong. Any help will be appreciated.

score 0 · Answer 1 · answered Jan 16 '20 at 13:22

I make and example 1 year ago with graphql generator so maybe its outtodate with new versions, but If want try I have

overwrite: true
schema: schema.graphql
documents: src/app/graphql/*.graphql
generates:
  ./src/app/generated/graphql.ts:
    plugins:
      - typescript-common
      - typescript-client
      - typescript-apollo-angular
  ./schema.json:
    plugins:
      - introspection

I think your problem is your schema you should have something like this

type Query {
        login(email: String!, password: String!): AuthData!
        user: User!
        pets(page: Int, name: String, type: String): PetData!
        pet(id: ID!): Pet!
}

type Mutation {
        createUser(userInput: UserInputData): User!
        deletePet(id: ID!): Boolean
}

type User {
        id: ID!
        name: String!
        email: String!
        password: String!
        status: String!
        pets: [Pet!]!
}

type AuthData {
        token: String!
        userId: String!
}

input UserInputData {
        email: String!
        name: String!
        password: String!
}

type Pet {
        id: ID!
        name: String!
        type: String!
        imageUrls: [File!]!
        creator: UserPet!
        createdAt: String!
        updatedAt: String!
}

type PetData {
        pets: [Pet!]!
        totalPets: Int!
        filterData: FilterDataPet!
}

type File {
        id: String!
        path: String!
        filename: String!
        mimetype: String!
}

type UserPet {
        id: ID!
        name: String!
        email: String!
        pets: [Pet!]!
}

type FilterDataPet {
        isFilterData: Boolean!
        currentPage: Int!
        queryParams: QueryParamsPet
}

type QueryParamsPet {
        name: String
        type: String
}

You can follow the full example here https://github.com/anthowm/graphqlpetapi-frontend/blob/master/codegen.yml

Apollo client for angular: code generation from graphql files

1 Answers1