angular 的 Apollo 客户端：从 graphql 文件生成代码

Posted 2023-03-08

【中文标题】angular 的 Apollo 客户端：从 graphql 文件生成代码

【英文标题】：Apollo client for angular: code generation from graphql files

【发布时间】：2020-05-03 07:40:32

【问题描述】：

我是从here 了解到angular graphql code generator 的。我正在尝试在我的项目中使用它来为 angular 生成 graphql 类型和 Query 服务。

我的 codegen.yml 文件如下所示。

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"

我有一个graphql 文件apps\myGraphQLApp\src\gqls\myBooks.graphql，内容如下

query GetMyBooks 
  books
    id
    name
  

我正在运行npx graphql-codegen --config codegen.yml，但它失败并出现以下错误。

  √ 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)
        ...

我的 graphql 服务器肯定公开了一个查询根，我可以用不同的客户端调用它。

schema 
  query: MyGraphQLQueryType

我不确定我做错了什么。任何帮助将不胜感激。

【参考方案1】：

我在 1 年前使用 graphql 生成器制作和示例，所以它可能已经过时了新版本，但如果想尝试我有

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

我认为你的问题是你的架构你应该有这样的东西

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

您可以在此处查看完整示例https://github.com/anthowm/graphqlpetapi-frontend/blob/master/codegen.yml