In this workshop, participants will learn how to leverage GraphQL to build powerful and efficient backends for their React applications.
@glnnrys · glennreyes.comGraphQLFor React Developers
View Slide
Glenn Reyes@glnnrys · glennreyes.comSoftware Engineer, Tech Speaker &Workshop InstructorHead of Developer Relations at Kadena
Plan for todayGraphQL for React Developers1. Intro2. Learn GraphQL basics3. Build GraphQL queries & mutations4. Get familiar with the GraphQL client5. Implement queries & mutations on the client6. Access control & authorization7. Production deployment15 mins45 mins45 mins15 mins45 mins15 mins15 mins
GraphQL
Query Language for APIs
Ask for what you wantAnd get predictable results
State of GraphQL
Describe your data
User
Post
PostUser
User Post
User Postnameemailusernamebioagepostsmessagefromreactions
Schema Definition LanguageOr just–SDL
GraphQL scalar typesThat are available out of the box• Int• Float• String• Boolean• ID
Ask for what you want
Ask for what you wantand get predictable results
Language-agnostic
Why GraphQL?
Single EndpointFlexibilityfor Frontend TeamsEvolvable API designReal-time data withSubscriptionsExactData RetrievalIntrospectionRichEcosystem &ToolingAggregated DataSourcesHere’s anotherStrong Typed Schema
Stack without GraphQL
Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql-fit-in-the-stack-modern-app-development-with-graphql
Stack with GraphQL
Tooling
GraphQL Explorers
GraphiQL
Apollo Explorer
Let’s code!github.com/glennreyes/react-graphql-workshop