BlazeApollo
Blaze integration for the Apollo Client. Load GraphQL data directly in your templates!
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. 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({ connection: Meteor.connection })
});
setup({ client });Something to query.
For the examples below we'll use the following data:
import gql from 'graphql-tag';
const HUMAN_QUERY = gql`
{
human(id: "1000") {
name
height(unit: FOOT)
}
}
`;The result will look like this:
{
"data": {
"human": {
"name": "Luke Skywalker",
"height": 5.6430448
}
}
}Directly copied from the awesome GraphQL examples.
Basic template example
import './human.html';
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.
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:
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();
// You might need some control over the observer
// It's simply available on the result
result.observer.setVariables({});
});Generic template helpers.
Testing
This package uses practicalmeteor:mocha for testing:
meteor test-packages ./ --driver-package practicalmeteor:mocha
