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
Build a GraphQL Client for React
By Vilva Athiban
