Blaze integration for the Apollo Client
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
specs
.eslintrc.json
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
client.js
client.spec.js
package.js
package.json

README.md

BlazeApollo

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

Build Status Greenkeeper badge Conventional Commits

Table of Contents

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

import ApolloClient from 'apollo-client';
import { setup } from 'meteor/swydo:blaze-apollo';

// When using the meteor/apollo package:
import { meteorClientConfig } from 'meteor/apollo';
const client = new ApolloClient(meteorClientConfig());

// When using meteor/swydo:ddp-apollo:
import { DDPNetworkInterface } from 'meteor/swydo:ddp-apollo';
const client = new ApolloClient ({
  networkInterface: new DDPNetworkInterface()
});

setup({ 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:

{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 5.643
    }
  }
}

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>
import './human.html';
import HUMAN_QUERY from './humanQuery.graphql';

Template.human.helpers({
  human() {
    return Template.instance().gqlQuery({ query: HUMAN_QUERY }).get().human;
  }
});

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

Template.human.onCreated(function () {
  this.gqlMutate({
    query: HUMAN_MUTATION_QUERY
  });
});

GraphQL Subscriptions

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

Template.human.onCreated(function () {
  this.gqlSubscribe({
    query: HUMAN_SUBSCRIPTION_QUERY
  });
});

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

General 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 ReactiveObserver with a reactive get() method, just like any ReactiveVar:

Template.myTemplate.onCreated(function() {
  const result = this.gqlQuery({ query: QUERY });

  // This is reactive
  result.get();

  // So this will rerun automatically when data in the cache changes
  // This includes updates from mutations and (GraphQL) subscriptions
  this.autorun(function() {
    result.get();
  });

  // Stop listening to updates
  // Note: This is automatically done when the template is destroyed
  result.unsubscribe();

  // Acess the original observer directly via the result
  result.observer.setVariables({});

  // Detect if a result is loaded for the first time, reactively
  result.isReady();
});

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

Swydo

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