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 GraphQL training resources that we created @ Apollo to help you ramp up and get comfortable building GraphQL applications from back to front.
📽️ [Watch] Learn GraphQL – 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] Learn GraphQL – 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 GraphQL 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.
