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

Posted on

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

Hello, Welcome to my blog!

Recently, I subscribed to a tutorial website called Thinkster.io. Thikster has tutorials dedicated to making production-ready applications. They have tutorials for many different frameworks. I decide to go through their node.js tutorial.

I also wanted to get more comfortable with typescript, so I changed the tutorial up some by implementing the tutorial using TypeScript. The tutorial is written initially with regular javascript. I had the extra challenge of translating the tutorial to use TypeScript as I went through it. Going through this tutorial was a great experience. I learned some great techniques for building an API with node.js and TypeScript.

Programming with TypeScript was enjoyable. It cleaned up the code allot! Which is always a great thing. Since I have programmed in the past, with C, C++ and C#, I also found working with TypeScript very familiar.

I posted my code for this project on my Github. https://github.com/coreyjjames/REALWORLD-API-TYPESCRIPT

The tutorial also covered Postman. Postman is an application that allows you to test your API. I liked it allot, I have lightly used Postman in the past, but this time I used it extensively. I love how you can write test cases in Postman. It was handy at the end of the project to check for any bugs that got missed during the central development time.

In the next couple of weeks, I would like to improve this API some more by using a framework called GraphQl.

I’ll post another blog post when I finish!

If anyone has some improvements I can make to the code, let me know. 🙂