rhythm55 / graphql

graphql

What is graphQL

• graph query language
• data is represented as graph
• all graphql calls by default are HTTP POST call
• 

Why graphql

• avoid over-fetching : can fetch selective data. ex: we have 10 fields and we just want to fetch topArtist.
• avoid under-fetching
  • to fetch topArtist, topAlbum etc we need to make seprate API calls. Using graphQL in one api call only we can fetch both.
• Better mobile performance
  • mobiles dont have hardware and ram like desktops. fetching is a costly operation. with graphql we can limit data to be loaded on mobile and on desktop.
• Efficiency and precision
• Declarative data fetching
• Hierarichal structure
• Strongly typed
  • 
• Introspection - documentation is available
  • 
• Real time capabilities subscription

Rest VS graphQL

Aspect	#Rest	#GraphQL
Data fetching	Multiple endpoint	Single Endpoint
Request structure	Fixed structure + HTTP methods	Flexible (Query + Mutation)
Over fetching / Under fetching	Issue	Resolved
Response Size	fixed	flexible
Versioning	Explicit versioning	Flexible (can depricate the field in existing one)
Schema Definition	Not well defined	explicit Schema Definition
Real time capabilities	web sockets	subscription
Tooling support	postman	playground
Caching	Relies on HTTP cache	Fine Grained - apollo client provides it
Client control	no	Yes

GraphQL building blocks

• schema/types
• Query/Mutation
• Resolver

Apollo client

• Initialize ApolloClient

  •   const client = new ApolloClient({
        uri: 'https://flyby-router-demo.herokuapp.com/',
        cache: new InMemoryCache(),    // cache query results after fetching them.
      });
    

• Connect your client to React

  •       <ApolloProvider client={client}>
            <App />
          </ApolloProvider>,