使用 eslint 从 graphql 解析器返回啥严格的打字稿类型?

Posted

技术标签:

【中文标题】使用 eslint 从 graphql 解析器返回啥严格的打字稿类型?【英文标题】:What strict typescript type to return from graphql resolver using eslint?使用 eslint 从 graphql 解析器返回什么严格的打字稿类型? 【发布时间】:2020-11-28 11:42:27 【问题描述】:

回购

https://github.com/inspiraller/apollo-typescript

代码运行,但 Eslint 打字稿抱怨。

我收到 eslint 错误:

 Query: 
    players: () => players
  

function.eslint@typescript-eslint/explicit-module-boundary-types 上缺少返回类型

index.ts

import  ApolloServer  from 'apollo-server';
import typeDefs from './schema';
import resolvers from './resolvers';

const init = () => 
  const server: ApolloServer = new ApolloServer(
    typeDefs,
    resolvers
  );

  server.listen().then((props:  url: string ) => 
    const  url  = props;
    console.log(`Server ready at $url`);
  );
;

init();

schema.ts

import  gql  from 'apollo-server';

const typeDefs = gql`
  type Player 
    id: String
    name: String
  
  type Query 
    players: [Player]!
  

  input PlayerInput 
    name: String
  

  type Mutation 
    addPlayer(player: PlayerInput!): Player
  
`;

export default typeDefs;

解析器.ts

interface shapePlayer 
  id: string;
  name: string;

const players: Array<shapePlayer> = [
  
    id: 'alpha',
    name: 'terry'
  ,
  
    id: 'beta',
    name: 'pc'
  
];

interface shapeResolver 
  Query: 
    players: () => Array<shapePlayer> | null | undefined | void;
  ;


const resolvers: shapeResolver = 
  Query: 
    players: () => players
  
;
export default resolvers;

我发现了许多可供使用的替代库,即 typegraphql,这似乎是减少样板打字稿类型的好解决方案,但它没有提供查询或突变的严格返回类型的答案。

推荐任何帮助。谢谢

【问题讨论】:

【参考方案1】:

也许有点晚了,但希望它也能帮助别人。

我找到了使用graphql-code-generator从您的架构中自动获取 TS 类型的最佳方法

如需快速回复,请粘贴您的架构here。


快速设置打字稿:

    安装

npm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-resolvers

它将安装 cli 和 typescript + typescript-resolvers 插件。

    在您的根目录下创建 codegen.yml 并输入:
overwrite: true
schema: 'http://localhost:3500/graphql'
generates:
  src/utils/codegen/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-resolvers'
    执行命令:

graphql-codegen --config codegen.yml --watch src/**/*.ts

    现在您可以执行以下操作:
// Import the types of your generated ts file.
import  MutationResolvers, QueryResolvers, Resolvers  from '@/utils/codegen/graphql'

const Query: QueryResolvers = 
  players: () => players


const Mutation: MutationResolvers = 
  updatePlayer: () => player


const resolvers: Resolvers = 
  Query,
  Mutation
;
export default resolvers;

截图示例:

intellisense and autocomplete

proper validation

【讨论】:

以上是关于使用 eslint 从 graphql 解析器返回啥严格的打字稿类型?的主要内容,如果未能解决你的问题,请参考以下文章

从 graphql yoga 返回状态码

无法将自定义结果从解析器传递到 Graphql

GraphQL:从兄弟解析器访问另一个解析器/字段输出

如何使用 type-graphql 解析器函数获取 graphql 后端中的选定字段?

从 Rest(Express) 迁移到 GraphQL:模型(mongoose) 在 graphQL 解析器中不起作用

可以为 GraphQL 解析器转换返回类型吗