typescript - 使用 eslint 从 graphql 解析器返回什么严格的 typescript 类型？

Question

repo

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

代码可以运行，但 Eslint typescript 会报错。

我收到 eslint 错误:

 Query: {
    players: () => players
  }

Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types

索引.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();

架构.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，这似乎是减少样板 typescript 类型的一个很好的解决方案，但它没有提供什么是查询或突变的严格返回类型的答案。

推荐的任何帮助。谢谢

Answer 1

也许有点晚了，但希望它也能帮助其他人。

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

要获得快速响应，请粘贴您的架构 here .

---

typescript 的快速设置:

1. 安装

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

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

1. 在您的根目录中创建 codegen.yml 并放入:

overwrite: true
schema: 'http://localhost:3500/graphql'
generates:
  src/utils/codegen/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-resolvers'

1. 执行命令:

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

1. 现在您可以执行以下操作:

// 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