Consuming-GraphQL-Apollo

Code repo for course Consuming a GraphQL API with Apollo Client and React on Pluralsight - by Adhithi Ravichandran

Setting up the Project

1. Project Set Up

• Navigate to /app and run npm install
• Spin your local server npm start to see the project preview

2. Install the local Server

To install and run GraphQl locally, navigate to the /api/ folder and run the dependencies, npm install, Spine the server on different node; You should be able to see the message graphql running on port 4000 .

• On the browser open the GraghQL environment http://localhost:4000/graphql .

TO BE CONTINUED

Key Concempts Covered

Introspection

GraphQL provides a way for clients to discover resources that are available in the Graphql API schema via Introspection.

• Provides clients a view of the available resources in the schema.
• Ability to build awesome tools i.e GraphiQL, Graphql playground.
• Self documentation, code generation.

Querying using Apollo Client

Query Definition

See Example below: you MUST import import { gql,useQuery } from "@apollo/client"; .

const SPEAKERS= gql query speakers{ speakers{ ...SpeakerInfo } } ${SPEAKER_ATTRIBUTES}

useQuery Hook:

A (React)[] Hook which is the API for Executing queries in an Apollo application. i.e const {loading,error,data} = useQuery(SESSIONS, { variables: {day, isDescription} }) and store the JSON response.

Query with Arguments

Query with variables

Applied while filtering data to be displayed.

Error Handling

This can help when:

• Query loaded was incorrect
• Server isnt responding
• Network issue. We include error as a property in useQuery()

Reuse fields with Fragments

Fragment is a reusable unit in Graphql. Can build set of fields and reuse them across multiple queries. In this project Fragments are used in the speakers & speakersById queries. NB: Once a fragment has been defined, always ensure to add reference to where fragment is defined.

const SPEAKER_ATTRIBUTES= gql`
  fragment SpeakerInfo on Speaker{
    id
    name
    bio
    sessions {
      id  
      title
    }
  }
`

const SPEAKERS= gql`
  query speakers{
    speakers{
     ...SpeakerInfo
    }
  }
  ${SPEAKER_ATTRIBUTES}
`

Aliases In GraphQL

You can apply when you cant directly query for same fields with different arguments. It let you rename results of a field to anything you want. In this project we used Aliases to sort sessions based on level of the sessions i.e Intro, Intermediate and Advanced.

Dynamic Queries with Directives