PRJ – 18/19

Thursday 27/08: 8AM – 3:15PM
Friday 28/08: 8AM –1PM

I am going to stop posting a blog for each day I work, instead posting less regularly with things I’ve learned.

GraphQL resolvers
I have been working on creating my resolvers for the GraphQL schema I have created. For any queries or mutations you have in your schema, you need to create a corresponding resolver for.

A resolver resolves your data for a mutation or query. In my case my resolvers contain KnexJS queries for communicating with the database. In the resolver is where you specify what data to retrieve, create, update or delete depending on the query that’s using it.

Data loading
Some resolvers whichmake a lot of consecutive calls to the database like retrieving a list of entities by ID, use a data loader. A data loader combines queries to the database into one and retrieves data in an orderly manner. This helps reduce the stress on your database.

Immutability-helper NPM package
I used this package to tackle the problem of updating an object property within an array of objects in the React component state. More specifically I used the update( ) method which really just provides some syntactic sugar around a common pattern in React when updating a more complex state. The code snippet below is an example taken from the package NPM page linked above. In my case myData is the my react state. Doing something like this is possible in vanilla JavaScript too but would require much more code, definetely a handy package to keep in mind when dealing with React component state!

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

React hooks
React hooks allow you to do tasks you usually could only do inside a React class components, like manage state and access life cycle hooks, within functional components now. React hooks were first introduced in version 16.8 in 2019.

I had some understanding about how they allow you to update state with the useState( ) hook and how useEffect( ) replaced life cycle hooks but I was confused about how the one hook, useEffect( ) replaced all the life cycle components I learned about in WEB601.

Turns out it’s to do with the second parameter you pass to useEffect( ). The first parameter is an arrow function (eg an api call) and the second paramater is a way to control when the first function is executed.

useEffect(() => {
  fetch('http://localhost:8000/api/products')
    .then(res => res.json())
    .then(fetchedProducts => setProducts(fetchedProducts))
}, [])

Here we pass a function which does a fetch from a backend, the second argument is an empty array. The empty array tells React to only execute the function passed as argument one, when the component is rendered for the first time, effectively making this the equivelant to the React life cycle hook, componentDidMount.

ComponentDidUpdate
Limit execution to the change of certain dependencies, eg selectedId

useEffect(() => {
  fetch('http://localhost:8000/api/products' + selectedId)
    .then(res => res.json())
    .then(fetchedProducts => setProducts(fetchedProducts))
}, [selectedId])

Or if you want to run on every re-render, don’t pass anything

useEffect(() => { ... })

componentWillUnmount
The code example below is from the React docs.

useEffect(() => {    
   function handleStatusChange(status) {      
      setIsOnline(status.isOnline);    
   }    
     
   ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);                                        
       
   // Specify how to clean up after this effect:    
   return function cleanup() {      
     ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    
   };  
});

As you can see, you can define any clean up work by returning another function.

‘When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.’ – ^{_{Using the Effect Hook. (n.d.). Retrieved August 29, 2020, from https://reactjs.org/docs/hooks-effect.html}}