Reactjs, Apollo/GraphQL Integration
How to create a simple CRUD mutation with Apollo-client and React hooks while integrating with GraphQL server
Recently, I picked interest in GraphQL. Prior to this epoch, I had been exposed to REST API but when I learnt of the ‘supposed’ advantages of the former over the latter, I shifted my focus and invested my energy on learning and coming up to speed with GraphQL.
According to Wikipedia, Graph query language(GraphQL) is an open-source data query and manipulation language for APIs, and a run-time for fulfilling queries with existing data. GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015.
In my quest to understand this technology, I religiously followed the learning path brought forth by my organization LearnFactory Nigeria. This technology was demystified by the erudite Mr. Favour George, a GraphQL strongman of LearnFactory Nigeria. His approach entailed teaching and simultaneously implementing an author/post to-do app as a hands-on project. This app would have a GraphQL server as the back-end integrated to a React front-end app with Apollo-client.
He commenced by explaining the concepts of GraphQL and its advantages over the REST API. Consequently he guided us — interns — to set up the GraphQL server. Soon, we were introduced to schemas, resolver functions, type defs, queries and mutations. This was a smooth sail till he introduced separation of concerns in a bid to structure the codes as well as ensure smooth and easy debugging. Later on, appreciating the concepts and reasons behind separation of concerns helped me understand its structure.
Further on, we were introduced to the GraphQL playground; an IDE that allows for testing the created server queries and mutation in the browser through the server URL/local host address.
My personal learning strategy entailed becoming comfortable with the basic core of GraphQL; querying and manipulating API data before proceeding to advanced concepts like authentication.
Soon we concluded works on the GraphQL server and set about integrating the created API with a React app through Apollo-client.
On the flip side, I found the client-side integration challenging and soon consulted the Apollo-client documentation. With this new found help, I was able to setup my Apollo-client with occasional consultations of my tutor’s client-side pre-coded project. Gradually, I was able to maneuver and meander through querying the server from the client.
After a bunch of successful query calls, I decided to try out mutations(manipulating the data). Mutation comprises creating, updating and deleting data whilst Query is solely reading or fetching data.
My first port of mutation call was adding/creating data or ‘adding a post’ as defined by the project. During this mutation, I needed to create and add multiple data simultaneously to the database from the React client but alas the documentation example dwelt on adding a single data whilst my tutor used a dependency called Formik — which I found confusing at first — to achieve this.
This was an issue because Apollo-client — the integration environment was built with React hooks as opposed to life cycle methods of React class components. This means that one handles integration basically with functional components (I stand to be corrected on this).
Using the useReducer React hook to handle multiple form inputs
Before discovering the useReducer React hook, I had unsuccessfully tried using the useQuery hook to handle multiple form inputs by mirroring similar usage with class components state/setState.
Thus, researching on “handling multiple form inputs with React hooks”, I soon discovered the useReducer hooks.
Prior to useReducer hooks, I tried this with the useQuery hook like so:
…………….This did not work.
With useReducer, I was able to achieve my desired result thus:
With the useReducer hooks, I easily handled multiple form inputs. Now I had to introduce this to the mutation.
Implementing a simple add/create mutation with Apollo-client
When the onSubmit event listener in the form is triggered after the form inputs must have been filled with a value, (postState.title && postState.body) runs a validation check to ensure that input values are not void. On successful validation, the addPost mutation function runs with its new arguments. In the addPost function, I mutated only 2 parameters — title & body — and used the spread operator (…) to add their new values to the addPost function arguments. When this runs, the new values are added to the database.
I hope you learnt something new. If you did not, my apologies.
At this point, I’d have to sheath my pen and continue my GraphQL sojourn…
