Introduction to GraphQL and Apollo Server

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 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.

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.

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:

   TypeScript

   import { ApolloServer } from '@apollo/server';
   import { startStandaloneServer } from '@apollo/server/standalone';

   Load necessary modules to create and define the GraphQL server.

2. Define Schema:

   TypeScript

   const typeDefs = `#graphql
     type Query {
       hello: String
     }
   `;

   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:

   TypeScript

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

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

4. Initialize and Configure Apollo Server:

   TypeScript

   const server = new ApolloServer({
     typeDefs,
     resolvers,
   });

5. Start the Server:

   TypeScript

   const { url } = await startStandaloneServer(server, {
     listen: { port: 4000 },
   });
   
   console.log(`🚀 Server ready at ${url}`);

   When you run the server file, it should print:

   text

   🚀 Server ready at http://localhost:4000/

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.

   TypeScript

   import fetch from 'node-fetch'; // Node.js < v18; otherwise, use built-in fetch

2. Define URL and Query:

   TypeScript

   const url = 'http://localhost:4000/';
   const query = `
     query {
       hello
     }
   `;

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

3. Create a Function to Execute the Query:

   TypeScript

   async function fetchGraphQLData() {
     try {
       const response = await fetch(url, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ query }),
       });
   
       const data = await response.json();
       console.log(JSON.stringify(data, null, 2));
     } catch (error) {
       console.error('Error:', error);
     }
   }
   
   fetchGraphQLData();

   Running this function should give you the output:

   JSON

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

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.

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.