GraphQL in 5 minutes

• Query
  ➡️ fetch data

• Mutation
  ➡️ mutate data
   
• Types
  ➡️ optional by default

GraphQL in 5 minutes

GraphQL in 5 minutes

We describe a query, to retrieve data from the API.

We want an artist, named
"John Mayer".
And for this artist,
retrieve top tracks names.

GraphQL in 5 minutes

Demo: https://spotify-api-graphql-console.herokuapp.com/

GraphQL in 5 minutes

• from id ➡️ searchArtists()
• from name ➡️ getArtist()

Here, GraphQL is used as an abstraction for the JS clients

An Artist can be retrieved using
an id or a name.

Depending on the arguments,
the API resolvers will call different Spotify REST API endpoints.

apollo-react-form 👨‍🚀

apollo-react-form 👨‍🚀

Compared to redux-form and Formik

• minimal and extendable configuration
• validators imported from GraphQL mutations
• standard validation format using JSON Schema
• Form bootstraping, ability to customise rendering with render props

apollo-react-form 👨‍🚀

How does it works?

• using react-jsonschema-form from Mozilla
   
• translate a GraphQL Schema to JSON Schema using an introspection query
   
• create a Apollo wrapper around react-jsonschema-form

apollo-react-form 👨‍🚀

What is an introspection query?

apollo-react-form 👨‍🚀

What is a JSON Schema?

apollo-react-form 👨‍🚀

apollo-react-form 👨‍🚀