Fetching data from the backend (GraphQL) to the client side (Apollo)



After installing via NPM, the current package.json shall be following:

graphql apollo tutorial



Let's create a new directory at src/utils location. Then in the new utils directory, please create a file called apolloConfig.js:

graphql apollo tutorial

EXPLANATION:

We import the following:

import ApolloClient, { createNetworkInterface } from 'apollo-client'
import gql from 'graphql-tag'

The Apollo-Client is a fully-featured caching client library (for any GraphQL server). We will use it, because it's powerful. In bigger projects some Apollo's features could be more useful over "plain GraphQL queries from the front-end". This is why, we have choose the Apollo client on the client-side over other solutions as fetch-isomorphic library, Lokka or Relay. Anyway, the Relay library doesn't play well with Redux.

const config = {
  // this url below, has to be replaced by you
  scapholdUrl: 'https://us-west-2.api.scaphold.io/graphql/[[REPLACE-YOUR-ID-HERE]]'
}

IMPORTANT NOTE:
you need to replace the scaphold's server address from the https://us-west-2.api.scaphold.io/graphql/[[REPLACE-YOUR-ID-HERE]] to the your one. You can find this address on the dashboard at https://scaphold.io/apps.

const query = gql`query GetAllDashboardItems {
  viewer {
    allDashboardItems  {
      edges {
        node {
          id
          label
        }
      }
    }
  }
}`

This is your first GraphQL query. Above you can find the query name query GetAllDashboardItems.

Then the word "viewer". That comes from the ScapHold's GraphQL schema which is default for everyone. It's the top level entity to model the various data served to the user - so we can make configure that certain data is available for a current logged user (after we will implement it later).

... and later "allDashboardItems" (the keyword "all" says, that you want receive the all dashboard items. It's GraphQL specified way to define queries).

We will learn more about the queries later. In case when you are interested to learn more, there is a GraphQL's queries documentation.

The last part of the current commit is this:


const opts = { uri: config.scapholdUrl }
const networkInterface = createNetworkInterface(opts)
const client = new ApolloClient({
  networkInterface
})

client
  .query({ query })
  .then(results => {
    const {
      data: {
        viewer: {
          allDashboardItems: { edges }
        }
      }
    } = results
    const resArray = edges.map((item, i) => {
      return item.node
    })
    console.info('Example resArray: ', resArray)
    return resArray
  })

The last thing is to import the utils/apolloConfig into the Dashboard's reducer by doing following:

graphql apollo tutorial

Run the application and check the console. This is just an example usage, before getting into the further implementation in our reducers (in a moment). As you can see above, there is a console.info and here is the response:

graphql apollo tutorial

PLEASE NOTE: you must visit the dashboard route, in order to trigger the above's console log. It won't work on other's routes like Home or Counter.


The current progress is available at the below's commit:

https://github.com/ReactPoland/reactjs-redux-tutorial/commit/graph-chapter-1

All that above, has been fetched from the Scaphold's database via their GraphQL server. For now, we will make the user of the fetched data in our front-end app (not just using a console log).

React Poland 2017