What strict typescript type to return from graphql resolver using eslint?

3
votes

repo

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

The code runs but Eslint typescript complains though.

I get eslint error on:

 Query: {
    players: () => players
  }

Missing return type on 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;

resolvers.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;

I've discovered many alternative libraries to use, ie typegraphql and this seems a good solution for reducing boilerplate typescript types, but it does not provide the answers to what is the strict return type of a query or mutation.

Any help recommended. thanks

1
typescriptgraphqleslintapollo-server

1 Answers

0
votes

Maybe it's a bit late but hope it helps someone else too.

I have found the best way to get typings for TS automatically from your schema using graphql-code-generator

For a quick response paste your schema here.

Quick setup for typescript:

  1. Install

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

It will install cli and typescript + typescript-resolvers plugins.

  1. In your root create codegen.yml and put:
overwrite: true
schema: 'http://localhost:3500/graphql'
generates:
  src/utils/codegen/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-resolvers'
  1. excecute command:

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

  1. Now you can do something as follows:
// 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;

Screenshot examples:

intellisense and autocomplete

proper validation