Using the fetched data in our application

At this point, we are have the function that helps us to fetch data from the backend to browser. We need to place it under correct place, so we will fetch the dashboard elements into correct places.

In short, we have to implement the fetching mechanism (below screenshot) for the items from the list:

graphql apollo tutorial



In order to implement this, we need to make following steps:

1) This is our new version of the apolloConfig.png file:

graphql apollo tutorial
We have deleted the test code and the export default also has changed.


2) Add the new Action called fetchDashboardDataSuccess in the src/routes/routes/Dashboard/modules/dashboard.js file:

graphql apollo tutorial
We also have introduced here a constant called FETCH_DASHBOARD_DATA_SUCCESS (you already shall be used to this convention from our previous tutorial's steps).


3) Next step is to make the asynchronous function called fetchDashboardDataAsync as following:

graphql apollo tutorial
This function uses async await approach (we have used it already in the login implementation in the tutorial so you shall be already familiar with it).


export const fetchDashboardDataAsync = () => {
  return async (dispatch, getState) => {
    const query = gql`query GetAllDashboardItems {
       viewer {
         allDashboardItems  {
           edges {
             node {
               id
               label
             }
           }
         }
       }
     }`

    const dashboardItemsArray = await client
      .query({ query })
      .then(results => {
        const {
          data: {
            viewer: {
              allDashboardItems: { edges }
            }
          }
        } = results

        const resArray = edges.map(item => {
          return item.node
        })

        return resArray
      }).catch(errorReason => {
        // Here you handle any errors.
        // You can dispatch some
        // custom error actions like:
        // dispatch(yourCustomErrorAction(errorReason))

        alert('Apollo client error. See console')
        console.error('apollo client error:', errorReason.message)
        return [] // anyway return empty an array for correctly working fetchDashboardDataSuccess action
      })

    dispatch(fetchDashboardDataSuccess(dashboardItemsArray))
  }
}
After the promise resolves, we dispatch the request results array (check the screenshot from the console.info here again) with use of the fetchDashboardDataSuccess(dashboardItemsArray) function.


  [FETCH_DASHBOARD_DATA_SUCCESS]: (state, action) => {
    return {
      ...state,
      dashboardItems: action.payload
    }
  },

The action handler just updates the single state tree with new fetched array of dashboard items, so the new array can be rendered in the src/routes/routes/Dashboard/containers/DashboardContainer.js related components.


4) In the same file (src/routes/routes/Dashboard/modules/dashboard.js) we continue to improve the Action Handlers:

graphql apollo tutorial
At this step, we have everything regarding the redux reducers (constants, actions and action handlers).


5) We need just to import the fetchDashboardDataAsync function into the src/routes/Dashboard/containers/DashboardContainer.js

graphql apollo tutorial

and then we change the component properly at src/routes/Dashboard/components/Dashboard.js:

graphql apollo tutorial
As you can see above, fetch functions starts in the constructor:


constructor (props) {
    super(props)
    this.props.fetchDashboardDataAsync()
}
We have also commented out the login check in the render function in order to have easier life while developing (you don't need to login everytime you make a change):

render () {
  // if(this.props.session.isNotLoggedIn) {
  //   return <h4>Please login in order to access your dashboard</h4>
  // }
Rest of the implementation shall be clear, as we have been explaining it more in the details in the beginning of the tutorial.



The commit from the above sub-chapter:
https://github.com/ReactPoland/reactjs-redux-tutorial/commit/graph-chapter-2

React Poland 2017