GraphQL

Search…
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 Relay
Facebook 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 Explorer
Graph 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
NOTES - Previous
MongoDB
Next - NOTES
TypeScript
Last modified 2yr ago
Copy link
Outline