typollo v1.0.0-beta.0
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...
5 years ago