GraphQL

REST is just to provide an API, so how do you connect GraphQL to a website?

• Relay is the glue

• GraphQL provides the API

• React is your front end

• Relay helps React communicate with GraphQL

  • From https://www.aizatto.com/

How to GraphQL - The Fullstack Tutorial for GraphQL

Facebook for Developers - Building the New facebook.com with React, GraphQL and RelayFacebook for Developers

GraphQL

• queries on matched types (so fb can fetch exact media type resources, like video, so users can watch the video on initial load without having to fetch every resources)

Subgraphs | Graph ExplorerGraph Explorer

• Only allowed to create subgraphs for web3/Ethereum Network

• In other words, other blockchains like Cosmos Network is not supported.

More APIs

• Star Wars API https://graphql.org/swapi-graphql
• GitHub https://developer.github.com/v4/explorer/
• Shopify https://help.shopify.com/api/custom-storefronts/storefront-api/graphql-explorer
• Yelp https://www.yelp.com/developers/graphiql
• More https://github.com/APIs-guru/graphql-apis

Defining a Schema

type Query {
  allPersons(last: Int): [Person!]!
}

type Mutation {
  createPerson(name: String!, age: Int!): Person!
}

type Subscription {
  newPerson: Person!
}

type Person {
  name: String!
  age: Int!
  posts: [Post!]!
}

type Post {
  title: String!
  author: Person!

Resolver

1. The payload of a GraphQL query (or mutation) consists of a set offields.

2. In the GraphQL server implementation, each of these fields actually corresponds to exactly one function that’s called a resolver .
3. The sole purpose of a resolver function is to fetch the data for its field.

4. When the server receives a query, it will call the functions for the fields that are specified in the query’s payload.

5. It thus resolves the query and is able to retrieve the correct data for each field.

6. Once all resolvers returned, the server will package data up in the format that was described by the query and send it back to the client.

Steps

1. after create-react-app, mkdir components and styles (../styles/index.css)

2. configure ApolloClient in src/index.js

3. set up backend

4. mkdir server with /prisma and /src

5. deploy the Prisma database service

6. navigate GraphQL playground

7. queries with Apollo Client

When a query is received by the server, it will resolve it and retrieve the required data from the connected database.

Apollo

• apollo-client where all the magic happens.

• apollo-cache-memory recommended cache

• apollo-link-http an apollo link for remote data fetching

• apollo-link-error an apollo link for error handling

• apollo-link-state an apollo link for local state management

• graphql-tag exports the gql function for your queries & mutations

• react-apollo contains the bindings to use Apollo Client with React

• queries: GET request

• mutations: POST request

Prisma provides the database layer which offers CRUD operations. The second layer is the application layer for business logic and common workflows (like authentication).

Apollo Client

• Query, Mutation

• ApolloConsumer is similar to React Context API
• use the ApolloConsumer component for firing queries manually in response to a user action, like a button click, or for prefetching data.

The declarative way for loading data with React & Apollo is using the <Query /> component and passing GraphQL query as prop

<Mutation /> component allow variables, optimisticResponse, refetchQueries, and update as props

The Graph Explorer