BlazeApollo

Blaze integration for the Apollo Client. Load GraphQL data directly in your templates!

Table of Contents

• Installation
• Setup
  • Server
  • Client
• Something to query
• GraphQL Queries
• GraphQL Mutations
• GraphQL Subscriptions
• Deep dive into the API
• Generic template helpers
• Testing
• Sponsor

Installation

meteor add swydo:blaze-apollo

meteor npm install --save apollo-client

Setup

Server

Before using this package it's recommended to first setup you GraphQL server. You can use the apollo package, which uses express and HTTP requests. Or use swydo:ddp-apollo, which leverages your current DDP connection, without setting up an HTTP server. ddp-apollo also give you subscriptions out of the box! Installation instructions are in the README of those packages.

Client

1import ApolloClient from 'apollo-client';
2import { setup } from 'meteor/swydo:blaze-apollo';
3
4// When using the meteor/apollo package:
5import { meteorClientConfig } from 'meteor/apollo';
6const client = new ApolloClient(meteorClientConfig());
7
8// When using meteor/swydo:ddp-apollo:
9import { DDPNetworkInterface } from 'meteor/swydo:ddp-apollo';
10const client = new ApolloClient ({
11  networkInterface: new DDPNetworkInterface()
12});
13
14setup({ client });

Something to query

For the examples below we'll use the following data:

{
  human(id: "1000") {
    name
    height(unit: FOOT)
  }
}

The result will look like this:

1{
2  "data": {
3    "human": {
4      "name": "Luke Skywalker",
5      "height": 5.6430448
6    }
7  }
8}

Directly copied from the awesome GraphQL examples.

GraphQL Queries

<template name="human">
  <h1>{{human.name}}</h1>
  <p>The height of this human is {{human.height}} foot.</p>
</template>

1import './human.html';
2import HUMAN_QUERY from './humanQuery.graphql';
3
4Template.human.helpers({
5  human() {
6    return Template.instance().gqlQuery({ query: HUMAN_QUERY }).get().human;
7  }
8});

And done! GraphQL data in your templates!

Besides query, all other options for ApolloClient.watchQuery are available. Like pollInterval, forceFetch, noFetch and variables.

GraphQL Mutations

1Template.human.onCreated(function () {
2  this.gqlMutate({
3    query: HUMAN_MUTATION_QUERY
4  });
5});

GraphQL Subscriptions

This packages works with any Apollo Client that has subscriptions available. No special setup required.

1Template.human.onCreated(function () {
2  this.gqlSubscribe({
3    query: HUMAN_SUBSCRIPTION_QUERY
4  });
5});

GraphQL subscribtions initiated with gqlSubscribe will automatically be unsubscribed when the template is destroyed!

Deep dive into the API

The example above is great for a quick setup, but sometimes you need more control. We can do that by catching the result of the query. This gives us a Result variable with a reactive get() method, just like any ReactiveVar:

1Template.myTemplate.onCreated(function() {
2  const result = this.gqlQuery({ query: QUERY });
3
4  // This is reactive
5  result.get();
6
7  // So this will rerun automatically when data in the cache changes
8  // This includes updates from mutations and (GraphQL) subscriptions
9  this.autorun(function() {
10    result.get();
11  });
12
13  // Stop listening to updates
14  // Note: This is automatically done when the template is destroyed
15  result.unsubscribe();
16
17  // You might need some control over the observer
18  // It's simply available on the result
19  result.observer.setVariables({});
20  
21  // Detect if a result is loaded for the first time
22  // This is also reactive
23  result.isReady();
24});

Generic template helpers

<template name="myTemplate">
  {{#if queriesReady}}
    <p>Loaded {{human.name}}</p>
  {{else}}
    <p>Loading...</p>
  {{/if}}
</template>

Testing

This package uses practicalmeteor:mocha for testing:

meteor test-packages ./ --driver-package practicalmeteor:mocha

Sponsor

Want to work with Meteor and GraphQL? Join the team!