A Basic End-to-End GraphQL Implementation

Introduction

This article is part 2 of a 4-Part Introduction to GraphQL. The purpose of this article is to provide a walkthrough of a basic end-to-end GraphQL implementation. The supporting code for this article can be found in the Demo App.

General Components

These are the general components of a GraphQL application architecture:

• GraphQL Server: Processes incoming queries and returns corresponding results
• GraphQL IDE: An interactive, in-browser development environment for testing and exploring GraphQL queries and mutations
• Schema: A contract between the client and the server which defines the structure of the data and types of queries that can be made
• Query Language: The language used for writing queries, mutations, and subscriptions in GraphQL
• Resolvers: Functions which serve as the bridge between the GraphQL schema and data sources

Local Environment Setup

1. Download the Demo App
2. Run npm install then run npm start
3. Navigate to Apollo Studio Explorer at https://localhost:4000/graphql

Simple Example Query

Let's walk through a simple example query to see how all of these pieces work together:

Fetch User fields by ID

Copy/paste the following query into the "Operation" panel of Apollo Studio Explorer:

query GetUserFields($userId: ID!) {
  user(id: $userId) {
    id
    name
    email
  }
}        

Copy/paste the following json into the Variables panel of Apollo Studio Explorer:

{
  "userId": "1"
}        

Click the blue "GetUserFields" button in order to execute the query. You should see the following response object in the Response panel on the right:

{
  "data": {
    "user": {
      "id": 1,
      "name": "John Doe",
      "email": "[email protected]"
    }
  }
}        

You have now successfully executed your first query in a basic end-to-end GraphQL implementation.

Conclusion

The purpose of this article was to provide a walkthrough of a basic end-to-end GraphQL implementation. You should now have a basic end-to-end GraphQL implementation in your local environment along with an understanding of how to configure and execute basic queries in GraphQL.