All Projects → Swydo → Blaze Apollo

Swydo / Blaze Apollo

Licence: mit
Blaze integration for the Apollo Client

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Blaze Apollo

React Boilerplate
⚛ The stable base upon which we build our React projects at Mirego.
Stars: ✭ 39 (-30.36%)
Mutual labels:  graphql, apollo, apollo-client
Apollo Invalidation Policies
An extension of the Apollo 3 cache with support for type-based invalidation policies.
Stars: ✭ 55 (-1.79%)
Mutual labels:  graphql, apollo, apollo-client
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+3173.21%)
Mutual labels:  graphql, apollo, apollo-client
Crypto Grommet
Crypto and equities app
Stars: ✭ 39 (-30.36%)
Mutual labels:  graphql, apollo, apollo-client
GraphQL API & React UI components for Elasticsearch. The easiest way to build a great search experience
Stars: ✭ 4,338 (+7646.43%)
Mutual labels:  graphql, apollo, apollo-client
Graphql Directive
Use custom directives in your GraphQL schema and queries 🎩
Stars: ✭ 142 (+153.57%)
Mutual labels:  graphql, apollo, apollo-client
Apollo Cache Redux
Redux cache for Apollo Client 2.0. This project is no longer maintained.
Stars: ✭ 179 (+219.64%)
Mutual labels:  graphql, apollo, apollo-client
Apollo Link
🔗 Interface for fetching and modifying control flow of GraphQL requests
Stars: ✭ 1,434 (+2460.71%)
Mutual labels:  graphql, apollo, apollo-client
A Pop
🎶 HD Music Streaming and Sharing Web App
Stars: ✭ 55 (-1.79%)
Mutual labels:  graphql, apollo, apollo-client
Apollo Cache Hermes
A cache implementation for Apollo Client, tuned for performance
Stars: ✭ 425 (+658.93%)
Mutual labels:  graphql, apollo, apollo-client
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (+126.79%)
Mutual labels:  graphql, apollo, apollo-client
The Ultimate Boilerplate for Products.
Stars: ✭ 563 (+905.36%)
Mutual labels:  graphql, apollo, meteor
Awesome Apollo Graphql
A curated list of amazingly awesome things regarding Apollo GraphQL ecosystem 🌟
Stars: ✭ 126 (+125%)
Mutual labels:  graphql, apollo, apollo-client
Meteor Apollo Accounts
Meteor accounts in GraphQL
Stars: ✭ 145 (+158.93%)
Mutual labels:  graphql, apollo, meteor
React Graphql Github Apollo
🚀 A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.
Stars: ✭ 1,563 (+2691.07%)
Mutual labels:  graphql, apollo, apollo-client
Next Graphql Blog
🖊 A Blog including a server and a client. Server is built with Node, Express & a customized GraphQL-yoga server. Client is built with React, Next js & Apollo client.
Stars: ✭ 152 (+171.43%)
Mutual labels:  graphql, apollo, apollo-client
📖 The GraphQL Guide website
Stars: ✭ 104 (+85.71%)
Mutual labels:  graphql, apollo, apollo-client
Meteor Integration
🚀 meteor add apollo
Stars: ✭ 107 (+91.07%)
Mutual labels:  graphql, apollo, meteor
ReactQL starter kit (use the CLI)
Stars: ✭ 232 (+314.29%)
Mutual labels:  graphql, apollo, apollo-client
A WhatsApp clone with React Native and Apollo (Tutorial)
Stars: ✭ 481 (+758.93%)
Mutual labels:  graphql, apollo, apollo-client


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

Build Status Greenkeeper badge Conventional Commits

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


meteor add swydo:blaze-apollo
meteor npm install --save apollo-client



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.


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") {
    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">
  <p>The height of this human is {{human.height}} foot.</p>
import './human.html';
import HUMAN_QUERY from './humanQuery.graphql';

  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 () {

GraphQL Subscriptions

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

Template.human.onCreated(function () {

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

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

  // Stop listening to updates
  // Note: This is automatically done when the template is destroyed

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

  // Detect if a result is loaded for the first time, reactively

Generic template helpers

<template name="myTemplate">
  {{#if queriesReady}}
    <p>Loaded {{}}</p>


This package uses practicalmeteor:mocha for testing:

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



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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].