Platform for GraphQL — Apollo

Apollo is the only platform that runs the queries written in GraphQL.

Apollo can be connected to multiple data sources. It sits between the client applications and backend services. Users can develop, manage and query the data with Apollo platform. Apollo provides three most useful things that made users easy to use and shift towards GraphQL.

1. Apollo Server.
2. Apollo Client.
3. Apollo Studio.

Apollo Server

Apollo server is compatible with any GraphQL Client. It is also a self documenting GraphQL API by using the schema provided.

It can be used as a standalone GraphQL server or as a middleware for the existing Node.js servers (Express and Fastify). Below we discuss on creation of Apollo server as stand alone server and also as a middleware for Express.

Apollo as Stand-alone server

We can create a stand-alone apollo server by initializing Node.js project and installing apollo-server and graphql packages in the project.

npm init --yes
npm install apollo-server graphql

1. Defining GraphQL Schema by creating an index.js file in the root directory and importing apollo-server .

const { ApolloServer, gql } = require('apollo-server');
const typeDefs = gql`
  type Hero {
    name: String
    heroName: String
  }
  type Query {
    heros: [Hero]
  }
`;

2. We can connect to different data sources to get the data. In this example we add some hardcore data. The structure is same as we defined in above schema.

const heros = [
  {
    name: 'Tony Stark',
    heroName: 'Iron Man',
  },
  {
    name: 'Steve Roger',
    heroName: 'Captain America',
  },
];

3. Resolver, helps you handle the queries. It tells the server how to fetch the data.

const resolvers = {
  Query: {
    heros: () => heros,
  },
};

4. Apollo server Instance creation. We provide the above schema, data source and resolver to the instance. To know more about resolves you can go though below article.

GraphQL Execution

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

Once all the steps are done, run the command node index.jsto start the server.

Here we go, your stand-alone Apollo server is up and ready to run the queries. By running the server and navigating to the URL, we can see Apollo sandbox where we can run over queries and see the result.

Output from the Apollo Sandbox

Apollo as a Middleware

We can pass Apollo as a middleware so that the existing application doesn’t change it’s architecture. Apollo created several packages for different varieties of servers like Express, Fastify, Hapi, Lambda, Azure functions, Cloud functions, Cloudflare etc. In the below example we see integration of Apollo with Express.

Install the required packages apollo-server-express apollo-server-core graphql .

npm install apollo-server-express apollo-server-code graphql

Import them into the project as show in the below example. Use the same typeDefs, resolvers and data that we used in the above stand-alone example.

import express from 'express';
import http from 'http';
import { ApolloServer } from 'apollo-server-express';
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
(async (typeDefs, resolvers) => {
  const app = express();
  const httpServer = http.createServer(app);
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  });
  await server.start();
  server.applyMiddleware({ app });
  await new Promise(resolve => httpServer.listen({ port: 4000 },resolve));
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
})(typeDefs, resolvers)

As a middleware we pass extra parameter plugin to the Apollo server with the actual server in which it will be running. Before applying middleware make sure that the Apollo server is started. Because of that we use async and await calls.

Apollo Client

It is a library that handles the data on both local and remote with GraphQL. It can automatically update the UI by performing operations like fetch, catch and modify on application data.

The library @apollo/client is written in JavaScript and also provides build in integration with React. Even there is a library for angular itself called apollo-angular which is a bridge between Apollo Client and Angular. So, it can be used in any framework that uses JavaScript inside.

It uses the declarative data fetching approach which means it does not track loading state while receiving data after running the query.

Apollo Studio

It is a cloud platform provided to all users of Apollo Server, where the users can run, build or validate on the schema written. It can also notify when the schema is changed and reports on daily metrics.

Users can create individual or organization accounts based on the requirement. Users can from teams and they can be in sync and get notifications when the schema changes and updates.

😃Happy coding…