quave:graphql

quave:graphql is a Meteor package that allows you to create your GraphQL server and client in a standard way.

Why

Every application that wants to use GraphQL needs to connect some packages and some npm modules. Also need:

Declare types and resolvers in separate files
Log for errors
Connect to Devtools

We believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).

Installation

Meteor package

meteor add quave:graphql

Server NPM packages

meteor npm install graphql-tools graphql-load graphql

Client NPM packages

meteor npm install apollo-client apollo-cache-inmemory apollo-link-error apollo-link-ddp

Usage

Server

In the server you should call startGraphQLServer providing your types and your resolvers. This function needs to be called during the server start so you should place it in the files imported by your main server file.

Here you can check one example of type and resolver.

See below how to use it:

1import { startGraphQLServer } from "meteor/quave:graphql/server";
2
3import { logger } from 'meteor/quave:logs/logger';
4
5
6import { DateTimeTypeDef } from "meteor/quave:graphql/DateTimeTypeDef";
7import { DateTimeResolver } from "meteor/quave:graphql/DateTimeResolver";
8
9const log = error => logger.error({ message: 'GraphQL server error', error })
10
11startGraphQLServer({ typeDefs: [DateTimeTypeDef], resolvers: [DateTimeResolver], log });

typeDefs expects an array of types definitions (schemas) and resolvers expects an array of resolvers. You can use a single type definition and a single resolver but usually is better to split them in multiple files.

You don't need to use DateTimeTypeDef and DateTimeResolver they are just examples.

You also don't need to provide a log function, by default it will log to console.error.

Client

In the client you should call startGraphQLClient, this is going to return an Apollo client already configured to you.

1import { startGraphQLClient } from "meteor/quave:graphql/client";
2
3const apolloClient = startGraphQLClient();

Then you can use the apolloClient as you want, see below two examples.

Optional installations

React

To use GraphQL with React you probably want to have a provider around your app main component so you need to install @apollo/react-hooks

meteor npm install @apollo/react-hooks

then you can use ApolloProvider

1import { startGraphQLClient } from "meteor/quave:graphql/client";
2
3import { ApolloProvider } from '@apollo/react-hooks';
4
5const apolloClient = startGraphQLClient();
6
7Meteor.startup(() => {
8  render(
9    <ApolloProvider client={apolloClient}>
10      <App/>
11    </ApolloProvider>, 
12    document.getElementById('react-target')
13  );
14});

To write queries and mutations you are going to use gql and so install graphql-tag.

meteor npm install graphql-tag

And here is how to use with hooks, in this example we are using useQuery hook.

1import React from 'react';
2import gql from 'graphql-tag';
3import { useQuery } from '@apollo/react-hooks';
4
5const nowQuery = gql`
6  query Now {
7    now {
8      dateTime
9    }
10  }
11`;
12
13export const App = () => {
14  const { loading, error, data } = useQuery(nowQuery);
15
16  console.log('loading', loading);
17  console.log('error', error);
18  console.log('data', data);
19
20  const today = data && data.now && new Date(data.now.dateTime);
21  const dayOfMonth = today && today.getDate();
22  const monthOfYear = today && today.getMonth() + 1;
23
24  const welcome = loading ? <h1>loading</h1> :
25    <h1>Welcome to quave:graphql ({dayOfMonth}/{monthOfYear})!</h1>;
26
27  return (
28    <div>
29      {welcome}
30    </div>
31  );
32};

No React

You can use this package in any app to setup GraphQL for you and then you can write queries and mutations using Apollo client or other wrappers, you will probably use gql then you should install graphql-tag

meteor npm install graphql-tag

and then use like this

1import { Meteor } from 'meteor/meteor';
2import { startGraphQLClient } from "meteor/quave:graphql/client";
3
4import gql from 'graphql-tag';
5
6const apolloClient = startGraphQLClient();
7
8Meteor.startup(() => {
9  apolloClient.query({
10    query: gql`
11      query Now {
12        now {
13          dateTime
14        }
15      }
16    `
17  }).then(({ data: { now }}) => console.log(now));
18});

Limitations

It's not ready yet for auto-complete queries with IDEs, at least on WebStorm it's not working out-of-box.

License

MIT