Lesson Overview

Welcome to the first lesson of our "Introduction to GraphQL and Apollo Server" course! In this lesson, we will introduce you to GraphQL and Apollo Server and guide you through setting up a basic GraphQL server.

GraphQL and Apollo Server

GraphQL is a query language for APIs that allows you to request only the data you need, unlike REST, which often requires multiple endpoints. While REST typically requires multiple endpoints for different resources (e.g., /users, /users/:id/orders), GraphQL consolidates everything into a single endpoint (e.g., /graphql). Clients interact with the server through this single endpoint, providing queries that define what data to retrieve, which solves the issue of over-fetching (too much data) or under-fetching (too little data).

Apollo Server is a popular, GraphQL-compliant server known for its simplicity and active support. Other tools available include:

  • Express-GraphQL: A flexible GraphQL server for Express applications.
  • Relay: A JavaScript framework for efficient data fetching with GraphQL.
Basic Structure of a GraphQL Server

The key components of a GraphQL server are:

  • Schema: Defines data types and the shape of queries. For example, a Query type with a hello field that returns a String.
  • Resolvers: Functions that fetch data as per the schema. For example, the resolver for hello returns "Hello, GraphQL!".

When handling a query, the server:

  1. Validates the query.
  2. Resolves fields using resolvers.
  3. Returns the resulting data.
Creating the Basic GraphQL Server

In this section, we'll set up a step-by-step basic GraphQL server using Apollo Server 4.

  1. Import Apollo Server and GraphQL types:

    Load necessary modules to create and define the GraphQL server.

  2. Define Schema:

    The typeDefs (short for "type definitions") define the schema of a GraphQL API using the GraphQL Schema Definition Language (SDL). It acts as the contract between the client and server, describing the types of data the server can return and the operations (queries and mutations) it supports. Here, we define a simple schema with a Query type that has a single field hello, returning a String.

  3. Define Resolvers:

    The resolver for the hello field returns the string 'Hello, GraphQL!'.

  4. Initialize and Configure Apollo Server:

  5. Start the Server:

    When you run the server file, it should print:

Querying the Server

Now that your server is running, let's query it to test if everything works correctly. This involves making a GraphQL request programmatically.

  1. Import Fetch Module:

    Ensure your environment allows HTTP requests. If you're using Node.js, consider using the built-in fetch module available in the latest Node.js versions, or you can enable it through package managers like node-fetch if you are using older versions.

  2. Define URL and Query:

    Specify the URL of your GraphQL server and the query you want to run.

  3. Create a Function to Execute the Query:

    Running this function should give you the output:

Note: In GraphQL, all operations (queries and mutations, we'll learn both later in the course) are sent as POST requests with a JSON body containing the query. GET request cannot have a body, which means the query, variables, and operation name all have to be sent through query parameters. This can be problematic since larger queries can easily cause certain servers to return HTTP 414 (URI Too Long). POST ensures that the query payload is encapsulated within the request body, making it easier to send complex queries with variables.

Running the above code confirms the server correctly handles your query and provides the expected response.

Lesson Summary

Up next, you'll practice creating more complex schemas and queries. This hands-on practice will solidify your understanding and prepare you for advanced topics.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal