Apollo Client subscriptions for GraphQL

This is the seventh instalment of our full-stack GraphQL + React tutorial, which walks you through building a messaging app. Each section is self-contained and focuses on a few new subjects, so you may start where you choose or go through the entire series…

#graphql 

What is GEEK

Buddha Community

GraphQL Subscriptions in Apollo Client

GraphQL subscriptions are based on a simple publish-subscribe system. In our server-side subscriptions package, when a client makes a subscription, we simply use a map from one subscription name to one or more channel names to subscribe to the right channels. The subscription query will be re-run every time something is published to one of these channels. We think a common pattern will be to publish mutation results to a channel, so a subscription can send a new result to clients whenever a mutation happens. This is why some people call subscriptions the result of someone else’s mutation .

#apollo client #subscriptions #graphql

How We Built GraphQL Subscriptions with Apollo

A real-world example
At Scaphold, we manage a lot of infrastructure to make sure our customers’ APIs stay available and performant. One of our core features is a graphical schema designer that allows you to easily define the GraphQL schema that will come to define your Scaphold API. What you don’t see when playing around with our schema designer, however, is a complex migration system that makes sure your API’s database is always up to date and in adherence with your schema. When you make a migration to your schema, the machine that fields the migration request will make the necessary changes to your database so that your API stays in sync.

#graphql #graphql subscriptions #apollo

Apollo Client Data Normalization and Storage

Apollo client is a powerful frontend GraphQL library that allows an application using GraphQL to query itself, and the connected GraphQL data service. It is a client side state management library that integrates deeply with GraphQL backends.

Under the covers, Apollo client takes your GraphQL query response, and flattens it into a key-value storage system. Take the following example:

// GraphQL Query and Type
type Account { 
  id: ID!
  userName: String!
}
query getAccount() {
  account {
    id
    userName
    __typename // not required, but for illustration
  }  
}

The query above for a value on type Account, would return a response like this:

{
  data: {
    account: {
      id: 1,
      userName: 'user',
      __typename: 'Account'
    }
  }
}

#apollo #graphql #apollo-client #javascript #react

Apollo Client vs. Redux: Learnings and Experience

The ever changing world of front end development continues to evolve and introduce many different libraries to solve your problems. As GraphQL continues to grow in popularity, the tools and libraries surrounding it change also. Recently I helped write a new application that interacted solely with a GraphQL backend, and used Apollo Client (AC) to interact with instead of Redux in our React frontend application. Having previously written many javascript apps with Redux, here are some takeaways from my experience.

Disclaimer: Comparing the two libraries assumes you are working with a GraphQL backend. Apollo Client doesn’t work with other types of backends and isn’t a viable alternative to Redux in that case.

#graphql #redux #apollo-client #javascript #apollo

An intro to GraphQL with Apollo Client and Angular

In this blog post,we will build a simple clone of pet library playground from scratch using Angular and Apollo, with features including authentication, returning a list of all pets and check-in/check-out pets.

Let’s start by adding Apollo Angular by using this command.

ng add apollo-angular

The above command will add an NgModule(graphql.module.ts) with an initial setup to the project. To this we need to add the URL of our GraphQL server, which in our case is http://pet-library.moonhighway.com

Let’s start with returning a list of all pets from the library. List screen should have a filter to see All, Available and Checked Out status. Our final UI should look like this.

Let’s add a new file pet.ts under models folder. You should be able to view the data types under the Schema tab in http://pet-library.moonhighway.com.

enum PetCategory {
    CAT,
    DOG,
    RABBIT,
    STINGRAY
}

export enum PetStatus {
    AVAILABLE,
    CHECKEDOUT
}

export interface Pet {
    id: string;
    name: string;
    weight: number;
    category: PetCategory;
    status: PetStatus;
    dueDate?: Date;
}

#graphql #angular #apollo client