ReactJS and Apollo Client
ReactJS has been the people’s favorite for quite a while. With its popularity, developers have been creating more features and libraries that interconnect with this frontend framework. In this article, I will further show how our project further leverage the capabilities of ReactJS.
Apollo Client
Communicating using GraphQL as a middle-man has been well-known for a while, especially when big techs are using it. To create GraphQL codes in frontend, we use Apollo Client, which takes care of requesting and caching your data. To initialize the GraphQL codes, we need to specify the Apollo client dependencies under .yml file.
When using this approach, note that you need to run the command gql-gen and before running npm start , so that GraphQL data are generated in form of .tsx files, and loaded.
Above are codes written in .graphql files, which will be used as a request from the frontend.
HOC and Compose
With ReactJS revolves around components having props and state, the components itself can get messy from receiving these features. To keep it simple, HOC patterns designs the components so that they are simple and stateless at first. The compose function will be the one who gives these additional properties and states, and even more features.
As shown, compose is a function that adds state via withState, props via withProps, handlers via withHandlers . When the function enchance receives the component configurationIndex, the component will get the offset, limit and filter convention that is used in the project. Also, the table also now has a function that changes the content based on the filter arguments. This way, the simple components are contained by itself, an might be reused again without the needs of the unnecessary state.
Rambda
Rambda is a functional style. Similar to ES6’s map object, it can convert received data to match the targeted fields that will be used for display later. Other benefits that makes developers favor Rambda over other functional style is the ability to have a side-effect free functions that is not mutable. This allows easier debugging and testing.
The function R.map works as a loop that iterates over an array. R.pipe creates a function that, that is used to rename the keys in the case above. Overall, the function above allows manipulation of objects so that the data can fit from the original GraphQL query to the field in our components.
New Approach
Keeping up with the trend of programming languages is essential, so that you know what is favorable by many developers and why. Hopefully, you can grasp as to why these leveraged ReactJS is used in such case. Good Luck!
