BlazeApollo

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

As you might have noticed, Blaze-Apollo isn't actively maintained/developed, because we're moving to React ourselves. Blaze is great, but has a lot of quirks. We have more trust in React for future development and projects. If we can fix things with reasonable investment, we will, but Blaze-Apollo will stay mostly "as is". Thanks.

Table of Contents

• Installation
• Setup
  • Server
  • Client
• Something to query
• GraphQL Queries
• GraphQL Mutations
• GraphQL Subscriptions
• General 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

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

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