Version #1: coding the reordering (read-only)

Before starting working on the code, watch this video which explains how to populate the database upfront, so we will be able to fetch data from the backend (and it won't be an empty list):

Please make sure that you made the things from the video above, before continuing the programming steps below. Otherwise, you may occur some problems. You can always ask questions on the Facebook group in case of any problems.

We have prepared the backend, let's start working on the front-end. Go to the src/routes/Dashboard/modules/dashboard.js file and find the function called "fetchDashboardDataAsync" - we need to do following in that function:

  • STEP #1. - let's fetch the items order
  • STEP #2. - let's fetch the items details
  • STEP #3. - let's mix the order with the items details
  • STEP #4. - let's dispatch the dashboardItemsArray
All that four steps are described in the javascript's code below:

export const fetchDashboardDataAsync = () => {
  return async (dispatch, getState) => {
    // below we are mocking the list name, but in future
    // when we will have more than just a one list
    // then that name below "dashboardMainListOrder"
    // will be dynamic one

    const dashboardListOrderName = 'dashboardMainListOrder'

    // *****************************************************************
    // *************
    // ************* STEP #1 - (fetch the items order) and
    // ************* STEP #2 - (fetch the items details)
    // *************

    // this query, is asking for the Order and items details
    const query = gql`query GetAllDashboardItemListOrders {
       viewer {
         allDashboardItemListOrders ( where: {
           orderListName: {
             eq: "${dashboardListOrderName}"
           }
         }) {
           edges {
             node {
               id
               orderListIdsArray
               orderListName
             }
           }
         }
         allDashboardItems  {
           edges {
             node {
               id
               label
             }
           }
         }
       }
     }`

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

        // check availablity orders in the response
        if (!(
          allDashboardItemListOrders &&
          allDashboardItemListOrders.edges &&
          allDashboardItemListOrders.edges.length
        )) {
          // thow error, which will catched by error handler below
          throw new Error(`Step 1 & 2. allDashboardItemListOrders collection
wasn't filled. See video how to fill collection`)
        }

        const { orderListIdsArray } = allDashboardItemListOrders.edges[0].node

        // Prepare convenient format for dashboardItems
        let dashboardItemsJson = {}
        allDashboardItems.edges.map((item, i) => {
          dashboardItemsJson[item.node.id] = item.node
          return item.node
        })

        // *****************************************************************
        // *************
        // ************* STEP #3 - (mix the order with the items details)
        // *************
        const dashboardItemsArrayOrdered = orderListIdsArray.map((listItemID) => {
          return dashboardItemsJson[listItemID]
        })

        return dashboardItemsArrayOrdered
      }).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
      })

    // *****************************************************************
    // *************
    // ************* STEP #4 - (dispatch the dashboardItemsArray)
    // *************
    dispatch(fetchDashboardDataSuccess(dashboardItemsArray))
  }
}

All the comments shall clear out the steps, that we are doing. Below is also a diff image, so you can find the improvements even better:

Diffs for the src/routes/Dashboard/modules/dashboard.js file are below

1) The dashboard.js diff part one:

graphql apollo tutorial

2) The dashboard.js diff part two:

graphql apollo tutorial

All those changes, helping us to fetch the order from the backend, and then fetch the details of each dashboard's items objects. We will improve this even more during next steps of the tutorial.

After all that points, you will be to see a full stack application that fetches the data from the backend:

ANIMATED-GIF-TO-ADD


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

React Poland 2017