March 30, 2021

Learn GraphQL – Tutorials for Fullstack GraphQL

Khalil Stemmler
Developer Advocate
@stemmlerjs
BackendExamplesFrontendHow-to
Last updated May 19, 2021

GraphQL lets front-end developers simplify their data-fetching and state management approaches. For backend developers, GraphQL acts as a structured, maintainable API. To learn how GraphQL works across the stack, I recommend completing a fullstack GraphQL tutorial.

In this short post, I’d like to share two resources that we created @ Apollo to help you ramp up and get comfortable building GraphQL applications from back to front.

📽️ [Watch] The lift-off series on Odyssey: the Apollo Course Platform

Earlier this year, we released Odyssey: the Apollo course platform. We wanted to create a more directed, interactive, and fun learning experience for developers in search of practical training using GraphQL and Apollo.

The first series of courses on Odyssey is called Lift-off.

What you’ll build

In Lift-off, you’ll build a full-stack GraphQL example application called Catstronauts, a learning platform for adventurous cats who want to explore the universe!

It contains list-view and detail-view pages of all the different courses.

Features

In Lift-off part I, you’ll learn the core components of a full-stack GraphQL app, specifically:

  • a schema first-approach to building web applications with GraphQL
  • GraphQL’s Schema Definition Language (SDL)
  • how to set up Apollo Server, test, and develop it using Apollo Explorer
  • how to connect to your GraphQL API from the front-end using Apollo Client and React

And in the second part of the series, you’ll learn:

  • how to write more advanced queries and display data in the UI
  • how to use variables
  • how to mutate data and update the UI

Get started

Ready to start? Head on over to odyssey.apollographql.com.

📖 [Read] The Official Apollo Full-stack GraphQL Tutorial

For those that prefer the written approach to learning, I recommend checking out the Official Apollo Full-stack GraphQL Tutorial via the Apollo docs.

What you’ll build

In the written tutorial, we build Space Explorer: an interactive app for reserving a seat on an upcoming SpaceX launch 🚀.

It contains a login page, list and detail-view pages, user profiles, and a cart for setting up launches.

Features

You’ll learn how to build a full-stack GraphQL application with authentication, pagination, state management, and more. Specifically, you’ll learn:

  • How to build a GraphQL schema using Apollo Server, hook it to data, and then connect to it from a client-side React applications using Apollo Client
  • How to use Apollo Client and React to fetch and display GraphQL data
  • How to use Apollo Server to build a GraphQL API
  • How to source data from a REST API
  • How to source data from a database

Get started

If you’re ready to walk through and build Space Explorer, check out the tutorial via the Apollo docs here.

Conclusion

There you have it — two great GraphQL tutorials to learn how to build fullstack apps.

Written by

Khalil Stemmler

Follow

Developer Advocate at Apollo GraphQL ⚡ Author of solidbook.io ⚡ Advanced TypeScript & DDD at khalilstemmler.com

Read more by Khalil Stemmler

Stay in our orbit!

Become an Apollo insider and get first access to new features, best practices, and community events. Oh, and no junk mail. Ever.

Make this article better!

Was this post helpful? Have suggestions? Consider so we can improve it for future readers ✨.

Similar posts

September 3, 2021

Journey of a GraphQL query

by Michelle Mabuyo

Company