Build a Graphql client for react in 25 minutes

@vilvaathibanpb

- Vilva athiban p b

About me

JavaScript / GraphQL  earns my bread

 

Travel and painting satifies my thirst

 

Endless love for OSS but not committed to a single project for long 😉

 

Works @ Omio , A Search Engine for Travel

 

Co-organizer of JSRealm, Chennai (@js_realm)

@vilvaathibanpb

Let's begin

@vilvaathibanpb

From the docs of Graphql

HTTP is the most common choice for client-server protocol when using GraphQL because of its ubiquity. A GraphQL server operates on a single URL/endpoint, usually /graphql, and all GraphQL requests for a given service should be directed at this endpoint. When receiving an HTTP GET request, the GraphQL query should be specified in the "query" query string.

what does that mean? 

@vilvaathibanpb

World's simplest graphql client

const query = "{continents{name}}";

const graphQLClient = (query) => (
    fetch(`https://countries.trevorblades.com/?query=${query}`)
        .then(async (resp) => 
            console.log(await resp.json()
        ))
)

graphQLClient(query);

@vilvaathibanpb

I'm done :)

@vilvaathibanpb

why do we need a graphql client ?

@vilvaathibanpb

Construct and scale requests

NETWORK INTERFACES

better Readability of queries

Consistent data across the application

OPTIMISTIC UI & LOCAL STATE

TOOLING AND ecosystem

configurable to sync with backend

@vilvaathibanpb

inside apollo-client

@vilvaathibanpb

apollo-cache

 

CACHES QUERY RESULT TREE

QUERY PATHS - SAME PATH, SAME QUERY

OBJECT IDENTIFIER

INMEMORY CACHE - WINDOW.__APOLLO_CLIENT__

 

@vilvaathibanpb

apollo-LINK

 

NETWORK INTERFACE

SHARED BETWEEN EVERY REQUEST

CUSTOM FUNCTIONALITY

 

 

 

COMPONSING LINK

apollo-CLIENT

@vilvaathibanpb

REACT-APOLLO

React Apollo is a React-specific abstraction over Apollo-Client. It lets you make queries/mutation in below formats: 

 

  • Hooks
  • Render-Props
  • HOC

@vilvaathibanpb

let's live code - hooks & render-props

@vilvaathibanpb

for my reference ;)

QueryMethods ->

        execute ->                                      getResult -> currentResult

               refreshClient                                  startSubscribtion -> next

               initializeObseQuery

               getResult

 

useQuery -> context, options, forceupdate

                   -> qureyRef , queryMethods, queryData

                  -> result -> queryData.execute

 

Query -> useQuery -> children(result)

if my live coding is messed :(

thank you

QA Time: 

I know everyone must be tired after a long day, but I am happy to answer questions and discussions afterwards. 

@vilvaathibanpb

follow me on twitter

Please drop in some suggestions and feedback, so I can get better next time 

Made with Slides.com