Platform for GraphQL — Apollo

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.

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…

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Cross Browser Testing your Stencil Web Component like a boss

389. Find the Difference

Everything New In React 18

Array Methods

ESP32 Internal Sensor

Triple Shot Powerup Behavior

VersalNFT Roadmap Updates 🌎

RxJS in-depth: Github repo ‘utils’ directory review (part 1)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Revanth Oleti

Revanth Oleti

More from Medium

How to run custom SQL queries using functions in Supabase

Supabase

Introducing resource by AlphaFlow

Driving TypeScript Adoption With Automated Reports

Start use SolidJS today