- Lab
- Core Tech

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.

Path Info
Table of Contents
-
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
andFlightPlansAPI.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. - 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
-
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.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 theresolvers.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 calledgenerate
.In the Terminal tab where you ran the
npm run dev
command, stop the server from running usingCtrl+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:
-
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 usingCtrl+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 usingCtrl+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.
- In the main pane's
-
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 aMutation
rather than aQuery
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 usingCtrl+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 usingCtrl+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" }
- In the main pane's
-
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.
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.