Posted on

React Practice With GraphQL

website

Hello, and Welcome to my blog!

Recently I have been working through some tutorials from Thinkster.io. In this blog post, I will be reviewing my experience going through the React and Redux tutorial.

I completed the tutorial using the GraphQL API I made. The tutorial uses a REST API, so I had to make lots of changes. The changes made completing the tutorial more challenging, but it also made it more interesting. I am glad I did it.

I used Apollo React Client as the GraphQL client to connect to my API. Overall, I liked Apollo, but since I was also using Redux, it made it a bit difficult at times. Apollo and Redux both due state management, I think for future GraphQL applications, I would probably not use them both at the same time. But for the practice, I am glad I used redux again.

It was fun using React again. My last React project ended in December. Completing this practice project was a great learning experience for me. I became more comfortable with making functional components. I now know when to use functional components over the traditional class component. In my last React project, I didn’t re-use components much. In this project, I got practice re-using a bunch of components.

I also changed up the router, the tutorial used react-router. I changed to Reach-router. The main reason for switching was due to some incompatibility with Apollo if I remember correctly. Overall, I found it works better than the traditional React router. I liked it a lot.

Another cool thing I learned well completing this tutorial was how to make custom Redux middleware. I created a custom middleware to handle setting and clearing the JWT from the browser. It worked amazingly, and it was easy to do. I will link the Git-Hub below if your interested; the code is in the file src/middleware.js.

To finish the project, I deployed the GraphQL server on Heroku and used an Amazon S3 bucket to host the web app. Here is the link to the site: http://react.practice.site.s3-website.ca-central-1.amazonaws.com/ 

To conclude, I had a great time doing this project, and I learned a lot. To run the project, I am using a MongoDB server hosted on MongoDB Atlas, GraphQL server hosted on Heroku, and React application hosted on Amazon S3 bucket.

Here is the link to the two Git-Hub repositories for the project.
https://github.com/coreyjjames/REACT-PRACTICE-APP-GRAPHQL
https://github.com/coreyjjames/GRAPHQL-REALWORLD-API-TYPESCRIPT

Posted on

GraphQL RealWorld API – TypeScript, JWT, MongoDB, Express and Node.js

Hello, Welcome to my blog!

Following up on my most recent post “RealWorld API – TypeScript, JWT, MongoDB, Express and Node.js”. I have modified the REST API I made into a Graph QL API.

What is GraphQL?

GraphQL is a query language for an API. GraphQL allows front-end applications to have control to specify the data received per request. All the data is available to you when you create a request, which means you can mix and match data per request. Drastically cutting down on the number of calls the front-end application has to make to the API.

My experience using GraphQL

I enjoyed using GraphQL, and I think it allows more flexibly than a REST API. There are many different flavours of GraphQL. I used Apollo Server Express. It was a bit of a steep learning curve, but once I built a few queries, I saw how easy to use it was.

Here is a list of some things that I learned about GraphQL. Examples can be found by viewing my code on git-hub.

  • GraphQL is not a database, It replaces your API router. It can be used with any database.
  • GraphQL uses a single POST route. On that POST route, you will make your Querys using the query language inside the HTTP body.
  • Unless specified, GraphQL will look for queries under the Query type.
  • The keyword mutation is used to tell GraphQL to change from looking at the default Query type to the Mutation Type.
  • It is best to practise to put all data fetching queries under the Query type and all data writing queries under the Mutation Type.
  • Postman works great to test your queries.
  • You need to define your schema using the query language GQL.
  • With Apollo authentication and error handling can be done when you create the Apollo server.

Conclusion

I definitely will use GraphQL for my future projects, and I like how flexible it is and that it is available for many different programming languages.

The code for this project can be found on my Git-Hub.
https://github.com/coreyjjames/GRAPHQL-REALWORLD-API-TYPESCRIPT