Project Purpose and Goal
I started to learn React.js and the whole concept of full-stack development in March 2020. During that time, I found out GraphQL which I think is very cool and efficient. After I made digiKIT with a REST API, I decided to try something with GraphQL, and a chat app popped into my head, because there's a "real-time" thing, so I can try out the subscription too!
Web Stack and Explanation
I use Apollo Server and Apollo Client/React because this is the first time I use a GraphQL API, there are tons of tutorials and well-written documents about Apollo which make me feel "safe". I also watched this tutorial series on YouTube first to help me get the whole picture of this kind of app, then I implemented everything by myself.
I found Prisma by accident, but I fell in love with it immediately. I had no experience with ORM before, and I've only made one app with PostgreSQL following along with a tutorial. Prisma makes me interact with PostgreSQL happier.
I like the schema and type concepts in GraphQL, it let me think more carefully. Same as Prisma, every time I write a Prisma schema it's like I'm not only making a plan but also carefully making a plan. And comparing to mongoose, the syntax of Prisma is easier to understand for me (a beginner).
For the frontend I use TailwindCSS for styling this time, it's the hot take now, I'd love to take an opportunity to know it. After reading their document, I think it will help on "faster developing". And turns out, I spend very little time on styling but the app still looks great.
Problem and Thought Process
There are very few problems in the backend, the whole Apollo Server/Prisma thing is super logical to understand. But a lot of "troubles" in the frontend... The React Hooks made me spent more time wrapping my head around it. That tutorial helps a lot.
Subscription
Another thing I want to mention is the replacing "add a new message" with the "subscribe a new message" concept in the frontend.
Before I implemented the subscription, I managed how to display the newly sent message and update the state in the useMutation. But when with the subscription, we need to manage these with the response of useSubscription.
I'm not sure whether I described it correctly in English, here's the code.
Lessons Learned
Wire up Prisma in the resolver's context argument;
Do the authentication/authorization thing in context;
The useReducer in React has the methodology as the old school Redux, not the new modern one;
The context in React is very useful for managing the state, and not every app needs an extra state management tool.