In this workshop, participants will learn how to leverage GraphQL to build powerful and efficient backends for their React applications. Participants will start by setting up a GraphQL server and then integrate it with a React frontend application. By the end of the workshop, participants will have a fully functional GraphQL application that they can deploy to production.
Duration
1 day (6 hours)
Prerequisites
- Participants should have a basic understanding of TypeScript and React
- Familiarity with Node.js is recommended, but not required
Learning Objectives
- Understand the benefits of GraphQL over REST APIs
- Build a fully functional GraphQL server with Node.js and Express
- Query and mutate data using GraphQL
- Set up a GraphQL client with Apollo Client and query data from the server
- Optimize GraphQL queries using fragments
- Implement authentication and access control in GraphQL
- Build a complete GraphQL application with React
- Deploy a GraphQL application to production
Curriculum
Session 1: Introduction to GraphQL
- What is GraphQL?
- Advantages of GraphQL over REST APIs
- GraphQL terminology and core concepts
- GraphQL vs. REST: Pros and Cons
Session 2: Setting Up a GraphQL Server
- Setting up a GraphQL server with Node.js and Express
- Creating a schema and resolvers
- Handling queries and mutations
- Integrating with a database
Session 3: Exploring the GraphQL API and the Schema Definition Language
- Understanding the GraphQL API
- Writing queries and mutations in GraphQL
- Using the Schema Definition Language (SDL)
- Creating custom types and fields
Session 4: Setting Up a GraphQL Client
- Setting up a GraphQL client with Apollo Client
- Querying data with Apollo Client
- Using Apollo Client's caching system
Session 5: GraphQL Fragments, Queries & Mutations
- Understanding fragments, queries, and mutations
- Creating efficient queries with fragments
- Performing mutations with GraphQL
- Handling errors in GraphQL mutations
Session 6: Authentication & Access Control Patterns
- Implementing authentication in GraphQL
- Using JWT for authorization
- Restricting access to GraphQL APIs
- Best practices for handling authentication and access control
Session 7: Putting it all together
- Building a complete GraphQL application with React
- Deploying your application to production
- Best practices for GraphQL application development By the end of this workshop, participants will have the knowledge and skills to build powerful and efficient GraphQL backends for their React applications, and will be able to apply these concepts to their own projects.
Appearances
Upcoming
International JavaScript Conference Singapore
Singapore, Singapore
Past
React Alicante
Alicante, Spain
WebCamp Zagreb
Zagreb, Croatia
React Alicante
Alicante, Spain
UpLeveled
Vienna, Austria
React Finland
Helsinki, Finland