Test responsive design using jest and react-testing-library
Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….
Testing React-Query with Jest and React-testing-library
Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….
The basic guide for React Query useMutation hook
React Query is a popular library for fetching, caching, and updating asynchronous data in React applications. It provides a number of hooks, including useMutation that allows you…
Submit formik form using React-Query mutations
In this article you will learn how to create forms using Formik library, and how to submit the forms using React-Query mutation hook. We will cover the…
useNavigate may be used only in the context of a component
If you’ve ever faced the following error in React: useNavigate() may be used only in the context of a component This error throws in useNavigate hook. This happens…
How To Dynamically load a JavaScript file in React
Introduction Some use cases require loading a specific Javascript script conditionally, this article will demonstrate how to dynamically load a javascript file in React once a particular…
How to invalidate query after mutations in React-Query
Introduction Query invalidation is an essential part while working with React-Query. Usually, when there is a mutation in the app, there are queries related, and when a…
How to handle multiple queries with React-Query
A super cool feature of React Query is that we can execute multiple queries in the same component, whether these queries are dependent or independent of each…
No QueryClient set, use QueryClientProvider to set one
When working with React-Query you might encounter the following error: No QueryClient set, use QueryClientProvider to set one, this source of this error might be one of…