grapql basics

[blade-sensei]

grapql basics

[blade-sensei]

Params

Alias

To rename responses,without conflicts

Fragments

to reuse a small par of queries

types

query, mutation, or subscription
like get/post-update/hooks

Directives

Conditional fetch props
@include(if: $withFriends)

[blade-sensei]

Call API GraphQL

//from browser 

https://graphql.org/graphql-js/graphql-clients/

var dice = 3;
var sides = 6;
var query = `query RollDice($dice: Int!, $sides: Int) {
  rollDice(numDice: $dice, numSides: $sides)
}`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: { dice, sides },
  })
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

[blade-sensei]

Apollo with React/Gatsby

import React from "react"
import ApolloClient  from 'apollo-boost';
import githubToken from '../secrets'
import fetch from 'isomorphic-fetch';

const token = githubToken;
const client = new ApolloClient({
  uri: 'https://api.github.com/graphql',
  request: (operation) => {
    operation.setContext({
      headers: {
        authorization: `Bearer ${token}`
      }
    })
  },
  fetch,
});

A better example for integration with Gatsby
The particularity with Gatsby is to Wrap the root component with Apollo Provider but here we can use a global context to pass the client apollo instance to use it in components
https://github.com/blade-sensei/rtn-review/blob/master/src/context/GlobalContextProvider.js