typollo

typollo

Typed GraphQL Client based on apollo-client.

The aim of typollo is to further reduce the amount of boilerplate code required to set up an end-to-end link between client and server. Plenty of code generators already exist to simplify creating schemas and typings, but none so far have created a type-safe GraphQL client.

Typollo takes in your GraphQL schema and generates a fully-typed client which gives you features such as code hinting and type-checking. It uses apollo-client as its foundations for communicating with the server and so benefits from Apollo's best features like built-in caching.

Getting Started

This is what you'll need to do before starting with the Usage section below.

Installation

First, you'll need to install some packages.

apollo-client is a peer dependency and so you can use a specific version if required. We'll use apollo-boost to simplify creating the client.

npm i typollo apollo-boost

Instantiate an apollo-client

You'll need to configure your apollo-client instance which will be used by typollo for communicating with the GraphQL server. You'll need to specify your own GraphQL server URI.

import ApolloClient from 'apollo-boost'

const client = new ApolloClient({
  uri: 'https://graphql-pokemon.now.sh'
})

Manually generate your typollo client

Typollo will regenerate itself everytime you do new Typollo (when process.env.NODE_ENV !== 'production'), however it can be a good idea to manually generate it to give you something to work with when starting out. It's recommended to just add an NPM script with this command.

npx typollo generate ./schema.graphql ./generated/typollo

Instantiate typollo

You can then create your typollo instance by passing in the apollo client you just created. You'll also need to supply the path to your GraphQL schema and the destination folder for the typollo client.

import Typollo from 'typollo'

const typollo = new Typollo({
  apolloClient: client,
  typeDefs: './schema.graphql',
  destination: './generated/typollo',
  // other args for configuration
})

Usage

A bunch of usage examples for getting you started with Typollo.

Simple Query

This queries for the first 700 Pokemon of the PokeDex, each with the fields id, name, types, maxHP. The a composer function is used to specify arguments on the pokemons field.

typollo.query(({ a }) => ({
  pokemons: a({ first: 700 }, [
    'id',
    'name',
    'types',
    'maxHP',
  ])
}))

Translates to GQL:

pokemons(first: 700) {
  id
  name
  types
  maxHP
}

Coming soon...