Featured resource
pluralsight tech forecast
2025 Tech Forecast

Which technologies will dominate in 2025? And what skills do you need to keep up?

Check it out
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Guided: Crafting Efficient APIs with GraphQL

This lab provides an introduction to core GraphQL concepts, regardless of their chosen development language and to provide a means of easily interacting with the GraphQL schema.

Labs

Path Info

Level
Clock icon Beginner
Duration
Clock icon 43m
Published
Clock icon Dec 20, 2024

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Introduction

    In this lab you will be completing a GraphQL service to work with flight plan data.

    This lab uses the Apollo GraphQL server and the code is written in Typescript. The concepts that you will learn here are transferable to other implementations of GraphQL servers and languages.

    You will primarily be working with 3 files to get, create and delete flight plans in the database. These files are schema.graphql, resolvers.ts and FlightPlansAPI.ts .

    As the name suggests, you will be defining the GraphQL schema for the data in schema.graphql. Each query and mutation defined in the schema need to have a corresponding Resolver. A resolver tells the GraphQL server how to populate data for each field in the schema, and you will be writing these resolvers in the aptly named resolvers.ts file.

    In order for the Resolvers, and other code in the service, to do their job, they need the data types found in the GraphQL schema defined in TypeScript. GraphQL provides a code generator to automate the tedious task of manually writing that code which you will also use as you go through this lab. There are 2 steps to complete in order to start the development of this lab.

    • First, the GraphQL service will be using data provided through a simple RESTful API. To start this API go to a Terminal tab and enter json-server --watch db.json. After you run the command line, you should see:
    Endpoints
    http://localhost:3000/FlightPlans
    
    • Next, in order to use the Apollo sandbox to run GraphQL queries, the server needs to be started. To start the server, go to your other Terminal tab and either enter npm run dev or click the Run button in the bottom right of your environment.

    The Apollo server provides a web interface that can be used to run local GraphQL queries defined in the GraphQL schema. Before getting into writing the schema, be sure that you can connect to it.

    The Web Browser tab should automatically connect to address localhost:4000. You may need to refresh it if it doesn't load at first. If for some reason it does not, be sure to enter that address or click the following link to open it in a separate tab:

    {{localhost:4000}}

    If everything is working correctly you should see the Apollo sandbox.

    info> If you encounter difficulties with a task, you can refer to the completed code for each step in the solution folder located in your workspace.

  2. Challenge

    Query by ID

    In this step you will add a query to get a single flight plan based on the ID of the flight plan. This flight plan ID will be passed to the query as a parameter.

    Before getting into writing the query to get a single flight plan by it's ID, have a look at the existing data to get a better idea of what's there.

    In the middle pane of the Apollo sandbox, replace this query:

    query ExampleQuery {
      id
    }
    

    with this query:

    query FlightPlans {
      flightPlans {
        id
        FlightPlanDetails {
          AircraftIdentification
          AircraftType
          ArrivalAirport
          DepartingAirport
          FlightType
        }
      }
    }
    

    To see the data click on the FlightPlans button in the top of the middle pane.

    Run the query

    The results of the query will be shown in the far right pane of the web page.

    Back to the query you are going to write in this step, there are three things to be done. The first task in this step will be to define the query’s schema in schema.graphql Once that is done you will move onto the API where you will define how to get the data from the data source. Finally in the resolvers.ts file you will define how to populate the data that will be returned from the query. The Typescript language requires strongly typed variables. Fortunately the Apollo server tools have a handy tool to generate typescript types for us called generate.

    In the Terminal tab where you ran the npm run dev command, stop the server from running using Ctrl+C.

    On the command line type npm run generate to generate the typescript types.

    The generate tool continues to listen for changes. Because the purpose of running this command is to only generate the typescript types from the code you have just written, stop the generate tool from endlessly listening for changes by again using Ctrl+C.

    Now you can run npm run dev again to start the server. Add this query in the main pane:

    query FlightPlan($flightPlanId: ID!) {
      flightPlan(id: $flightPlanId) {
        id
        FlightPlanDetails {
          AircraftIdentification
          AircraftType
          ArrivalAirport
          DepartingAirport
          FlightType
        }
      }
    }
    

    Because this query gets a flight plan by the flight plan's ID, you need to pass that ID to the query. In the main pane, below the area where you write queries there is a second area where you will pass any variables to the query. In this area add the data by entering the following:

    {
      "flightPlanId": "iry0"
    }
    

    Run the query by clicking on the "FlightPlan" button

    If all goes to plan you will see this result: Single Flight Plan result

  3. Challenge

    Create Flight Plan

    Working with data doesn't stop at querying existing data. There must also be the ability to create new data records, update existing data and delete specific data.

    In this step you will be adding the ability for the GraphQL service to create a new flight plan.

    Because you will be passing flight plan data to the server you will need to define the data that you will be sending in the GraphQL schema.

    Also, in order to know if the operation was successful, you will need to create a response data structure that can be used to notify the user of the outcome of the operation.

    Because the code has been refactored in this step, you will need to again stop the server from running.

    In the Terminal tab where you ran the npm run dev command, stop the server from running using Ctrl+C.

    On the command line type npm run generate to generate the typescript types. The generate tool continues to listen for changes, so stop the generate tool from endlessly listening for changes by again using Ctrl+C.

    Now you can run npm run dev again to start the server. Now that you have written the code needed to create a new record in the data source, you can test the code in the Apollo sandbox.

    • In the main pane's Operation section, write the GraphQL query code for the create flight plan.
    mutation CreateFlightPlan($input: CreateFlightPlanInput!) {
      createFlightPlan(input: $input) {
        code
        success
        message
      }
    }
    
    • In the main pane's Variables section, provide the Flight Plan values to be entered into the data source. You may use any values you would like, but if you are unsure what values to enter, here is some sample data that you can use:
    {
      "input": {
        "AircraftIdentification": "N7368F",
        "AircraftType": "Honda Vision Jet",
        "ArrivalAirport": "KSLC",
        "DepartingAirport": "KCLE",
        "FlightType": "IFR"
       }
    }
    

    After running the Create Flight Plan query in the Apollo sandbox, you can check that the new flight plan has been added to the data source by running the FlightPlans query from step 2 which was

    query FlightPlans {
      flightPlans {
        id
        FlightPlanDetails {
          AircraftIdentification
          AircraftType
          ArrivalAirport
          DepartingAirport
          FlightType
        }
      }
    }
    

    Given the implementation of the data source that is being used in this lab, new entries are appended to the list of Flight Plans and as such the new Flight Plan will be the last in the list.

  4. Challenge

    Delete Flight Plan

    In this last step you will create the ability to delete a flight plan. Implementing the delete operation with be similar in most respects to the implementation of the getFlightPlanById step. The delete operation needs to know which flight plan to delete, so you must pass the ID of the flight plan to delete to the query.

    Unlike the getFightPlanById step, this step is changing data so it will be a Mutation rather than a Query Because the code has been refactored in this step, you will need to again stop the server from running.

    In the Terminal tab where you ran the npm run dev command, stop the server from running using Ctrl+C.

    On the command line type npm run generate to generate the typescript types. The generate tool continues to listen for changes, so stop the generate tool from endlessly listening for changes by again using Ctrl+C.

    Now you can run npm run dev again to start the server. Now that you have written the code needed to delete a record in the data source, you can test the code in the Apollo sandbox.

    • In the main pane's Operation section, write the GraphQL query code for the delete flight plan.
    mutation Mutation($deleteFlightPlanId: ID!) {
      deleteFlightPlan(id: $deleteFlightPlanId) {
        code
        success
        message
      }
    }
    
    • In the main pane's Variables section, provide the Flight Plan Id of the flight plan to be deleted. You may use any values you would like, but if you are unsure what values to enter, here is some sample data that you can use:
    {
      "deleteFlightPlanId": "4t0i"
    }
    
  5. Challenge

    Summary

    With all of these steps completed, you now have a functional QraphQL implementation which you can use to both query and manipulate records in a data source.

    Looking back through the steps you have learned how to:

    • Construct GraphQL queries and pass values to a mutation
    • Implement an Apollo API to work with a data source to both get data as well as manipulate data.
    • Define schemas in GraphQL query language to retrieve and manipulate data in a data source
    • Map data between the GraphQL schema and the data source using resolvers.

    From here feel free to play with various aspects of the code base and experiment with different ideas.

With over 20 years of experience in the software world, Ed is currently an enterprise architect but always a mentor and innovator.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.