How To Dev

Introduction GraphQL is a powerful query language for APIs which optimizes performance by allowing the client side to accurately define the required data structure, completely overcoming the over-fetching and under-fetching disadvantages of traditional REST APIs. In this article we will set up the connection environment as follows: Client connects to NextJS server which acts as a middleware to forward the GraphQL payload to NestJS. You will see that most of the implementation on NestJS will be quite simple and most of the content is auto-generated code via prisma-nestjs-graphql. It is suitable for projects that have complex processing requirements concentrated on the frontend and applying GraphQL will bring high flexibility in querying data so that the team can focus on building features for the frontend effectively. Prerequisites Please take a look at this article where I have specific instructions on setting up GraphQL for NextJS, here on the FE side we will use @tanstack/react-query...

Introduction MSW (Mock Service Worker) is the most popular library for modern projects, used to simulate APIs by intercepting network requests at the network layer. Instead of mocking at the application layer, MSW operates at the Service Worker layer (browser) and Node.js interception (server-side). Advantages: Simulate everything: Method, URL, Header, Status code, Delay. Help Frontend develop independently when Backend has not finished the API. Runs on both the browser (Browser) and NodeJS environment (SSR). Does not change the API call logic code, only needs request interception configuration. Clean mock code, written like writing a real API. Usage: You define handlers. When the application calls a URL, MSW catches that request and returns the response you defined without ever actually sending the request to the server. Detail Run the following commands to install and create the mockServiceWorker.js file # install yarn add msw # create mockServiceWorker.js npx msw init public/ ...