All Projects → Swydo → Blaze Apollo

Swydo / Blaze Apollo

Licence: mit
Blaze integration for the Apollo Client

Programming Languages

javascript
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
Reactql
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
Searchkit
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
Pup
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
Guide
📖 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
Kit
ReactQL starter kit (use the CLI)
Stars: ✭ 232 (+314.29%)
Mutual labels:  graphql, apollo, apollo-client
Chatty
A WhatsApp clone with React Native and Apollo (Tutorial)
Stars: ✭ 481 (+758.93%)
Mutual labels:  graphql, apollo, apollo-client

BlazeApollo

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

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!

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].