A Complete Introduction to Apollo, the GraphQL Toolkit

Apollo is a suite of tools that allows developers to create and consume GraphQL APIs. In this article, we will explore Apollo in detail, focusing on both Apollo Client and Apollo Server.

Introduction to Apollo

In recent years, GraphQL has gained popularity as an alternative approach to building APIs compared to traditional REST architectures. GraphQL allows clients to specify exactly which data they need, reducing unnecessary data transfers and providing a flexible and efficient way to interact with an API.

Apollo is a team and community that builds on top of GraphQL and provides various tools to simplify the development process. The tools offered by Apollo include Apollo Client, Apollo Server, and Apollo Engine.

Apollo Client is a powerful JavaScript client for GraphQL that supports popular frontend web technologies such as React, Vue, Angular, and more. It also provides native development support for iOS and Android.

Apollo Server is the server component of GraphQL, which facilitates communication between clients and backend systems by handling incoming requests and sending responses.

Apollo Engine is a hosted infrastructure that provides caching, performance reporting, load measurement, error tracking, and other useful features. While Apollo Engine is not open source, it is free for up to 1 million requests per month and supports the open source development of Apollo.

These tools can be used together or independently, depending on the specific needs of your project. Apollo is fully compatible with the GraphQL standard specification, ensuring compatibility with other GraphQL implementations.

Apollo Client

Apollo Client is the leading JavaScript client for GraphQL. It allows developers to build UI components that interact with GraphQL data, both for displaying data and performing mutations.

To get started with Apollo Client in a React application, you can use the create-react-app tool to set up a new app:

1	npx create-react-app myapp

Then, install the necessary dependencies:

1	npm install apollo-boost react-apollo graphql

Next, create a new ApolloClient object in your index.js file:

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

const client = new ApolloClient({
  link: createHttpLink({ uri: 'https://api.github.com/graphql' }),
  cache: new InMemoryCache()
})

This sets up the Apollo Client with a connection to the GitHub GraphQL API. You can customize the uri parameter to point to any GraphQL endpoint.

To connect the Apollo Client to your component tree, use the ApolloProvider component provided by react-apollo:

import { ApolloProvider } from 'react-apollo'

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)

With the Apollo Client configured and connected, you can start fetching data from the GraphQL API using GraphQL queries:

import gql from 'graphql-tag'

const GET_REPOSITORIES = gql`
  query {
    repositories {
      id
      name
      url
    }
  }
`

const App = () => (
  <Query query={GET_REPOSITORIES}>
    {({ data, loading, error }) => {
      if (loading) return <p>Loading...</p>
      if (error) return <p>Error :(</p>

      return (
        <ul>
          {data.repositories.map(repository => (
            <li key={repository.id}>
              <a href={repository.url}>{repository.name}</a>
            </li>
          ))}
        </ul>
      )
    }}
  </Query>
)

In this example, we use the Query component provided by react-apollo to execute the GET_REPOSITORIES query and handle the loading and error states. The query result is then rendered as a list of repositories.

Apollo Server

Apollo Server is a GraphQL server implementation for JavaScript, specifically for Node.js. It supports popular frameworks like Express, Hapi, Koa, and Restify.

To create a simple “Hello World” Apollo Server, follow these steps:

Create a new folder for your server application and initialize a package.json file:
1
2
3
mkdir appserver
cd appserver
npm init --yes
Install the required dependencies:
1
npm install apollo-server graphql
Create an index.js file and import ApolloServer and gql from apollo-server:
1
const { ApolloServer, gql } = require('apollo-server')

Define the schema for your server using the gql tag:

const typeDefs = gql`
  type Query {
    hello: String
  }
`

Implement the resolver functions for your schema:

const resolvers = {
  Query: {
    hello: () => 'Hello, World!'
  }
}

Initialize an ApolloServer instance with the type definitions and resolvers:
1
const server = new ApolloServer({ typeDefs, resolvers })

Start the server and listen for incoming requests:

1
2
3

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`)
})

Now, you can run the server using node index.js. The server will start on the default http://localhost:4000 address.

You can then send a GraphQL query to the server using tools like curl. For example, run the following command:

curl \
  -X POST \
  -H "Content-Type: application/json" \
  --data '{ "query": "{ hello }" }' \
  http://localhost:4000/graphql

The server will respond with the query result:

{
  "data": {
    "hello": "Hello, World!"
  }
}

This is just a basic example, and Apollo Server offers many more features and options for building powerful GraphQL APIs.

Conclusion

In this article, we have explored Apollo, a powerful toolkit for working with GraphQL. We covered both Apollo Client and Apollo Server, discussing their features and providing examples to help you get started. With Apollo, you can efficiently create and consume GraphQL APIs, providing a modern and flexible alternative to traditional REST architectures.

Tags: Apollo, GraphQL, API, Client, Server