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.
Developer Advocate at Apollo GraphQL ⚡ Author of solidbook.io ⚡ Advanced TypeScript & DDD at khalilstemmler.com ⚡
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 ✨.