Questions tagged [rtk-query]

Redux toolkit query is for data and caching in a web application. It is an optional add-on in the Redux toolkit package.

RTK Query offers a set of powerful features that help developers handle common tasks related to data fetching, caching, and synchronization with the server. Some key features of RTK Query include:

  • Automatic API request generation: RTK Query generates API request endpoints based on a configuration object that defines the URL, method, headers, and other options. It eliminates the need to write boilerplate code for making API requests.

  • Automatic caching and invalidation: RTK Query automatically caches API responses, allowing subsequent requests for the same data to be served from the cache. It also provides mechanisms for cache invalidation when the data on the server changes.

  • Data synchronization: RTK Query handles data synchronization between the client and server, ensuring that the local data remains up-to-date with the server data. It supports background data fetching and real-time updates through WebSockets.

    Advanced data manipulation and normalization: RTK Query provides built-in support for data manipulation and normalization, allowing you to transform and shape the API responses before storing them in the cache.

  • Integration with Redux: RTK Query seamlessly integrates with Redux, leveraging the Redux store for storing the cached data and managing the state of ongoing API requests. It works well alongside other Redux Toolkit features, such as the Redux store, reducers, and middleware.

Overall, RTK Query aims to simplify the process of managing remote data in a Redux-based application by providing a standardized and efficient way to handle data fetching, caching, and synchronization.

You can learn more about RTK Query and its usage in the official documentation: RTK Query

948 questions
5
votes
3 answers

How to cancel the RTK-Query requests

I am using the RTK query to handle my requests. But I have a problem canceling requests. The scenario is like this, I have a modal to show a form to add a todo but, when users want to close the modal the request should be canceled if it is pending…
F-Fardin
  • 418
  • 1
  • 7
  • 21
5
votes
1 answer

How to access getTokenSilently() auth0 in RTK Query?

I'm completely new to using RTK Query, I created the app before but without the authentication and everything worked, now I want to add the authentication using Auth0 but I can't access any file I add getTokenSilently() PS. getTokenSilently is the…
5
votes
1 answer

What is the recommended way to perform multiple mutations in sequence in RTK Query?

Which way is recommended to perform multiple mutations in sequence using RTK Query? const [ updateProfile, ] = useUpdateProfileMutation(); const [ updatePost, ] = useUpdatePostMutation(); const performMutipleMuations = async ()…
dan_boy
  • 1,735
  • 4
  • 19
  • 50
5
votes
1 answer

Error handling in useLazyQuery hook of RTK Query?

Following is my implementation of the useLazyQuery hook: const [trigger, { loading: prodLoading, error: prodError, data: prodData } ] = prodApi.endpoints.getAllProducts.useLazyQuery(); where the result parameter is…
DooMGuy096
  • 252
  • 1
  • 2
  • 12
5
votes
2 answers

fetchMock error on testing RTK-query with jest (react Vite.js)

just tried to mocked the store then test the request with fetchMock but got this error : you can check out the full repo on : https://github.com/alibidjandy/layered-architecture src/app/main/__tests__/main.test.tsx (5.569 s) ● Console console.warn …
Ali Bidjandy
  • 361
  • 6
  • 15
5
votes
1 answer

polling interval of rtk query is not working

I'm in the process of implementing rtk-query and am having problems with the polling feature of the library. ### service.js export const api = createApi({ ..., endpoints: (builder) => ({ getBlockPurchase: builder.query({ query: (id) =>…
awwester
  • 9,623
  • 13
  • 45
  • 72
5
votes
3 answers

How to access data in child component of query called in parent component in rtk query?

How can I access the data of the query called in the parent component, inside a child component without prop drilling. For example, if in parent.js I call the getPost query const {data} = useGetPostQuery(); then how can I access this data further…
Beginner
  • 182
  • 2
  • 14
5
votes
2 answers

how can I save data into localStorage in RTK query?

I want to create a cart that contain list of products that user added and save it in localStorage. if we have this code for RTK query is that possible to define that cart inside the createApi() ? if not, how can I use it in another slice? export…
sarem eskandary
  • 504
  • 4
  • 16
5
votes
1 answer

How do I properly changing response data in RTK Query?

I'm trying to use RTK Query in currency-converter app. This app is based on 2 API. First, I'm fetching an object with currencies. Then, I'm fetching an array of countries and filter it, depending whether the country has that kind of currency or…
rgdzv
  • 433
  • 5
  • 18
5
votes
0 answers

How to get a global isFetching status for queries & mutations with RTK Query

A query returns statusses like isFetching, very nice. This is on a query level. But if we have a lot of queries and we would like to monitor if one of them is isFetching, to show a global loading indicator for example. So now I want to have…
5
votes
2 answers

React Toolkit Query - How to use transformResponse props with injectEndpoints()

I have a root API where I am injecting endpoints. But when I try to add a transform function it doesn't work. From the documentation of transformResponse I can see that the transform prop is attached to the query object. Here is what I am…
Sisir
  • 2,668
  • 6
  • 47
  • 82
5
votes
1 answer

RTK Query Pagination and Combine Queries

const renderItem = ({ item }: {item : siteDataCard}) => { return (
5
votes
1 answer

Redux RTK query invalidatesTags not called after mutation

I've been trying to figure out why tag invalidation is not working and added some logging. The providesTags in getMe works fine, but invalidatesTags in login is never called. What might be wrong? I have a redux RTK query API like this: const…
mjuopperi
  • 773
  • 7
  • 25
5
votes
1 answer

Need for thunks if I use Redux Toolkit and RTK-Query?

I am using Redux Toolkit (RTK) and Redux Toolkit Query (RTK-Query). Is it best practice, necessary, or advised in any scenario to still use thunks, or should I move all logic into components? (like in handleLogin() below) const Login = () => { …
5
votes
1 answer

Process fetched data - RTK Query / Redux toolkit / React

I'm new to all mentioned technologies and I'm trying to understand how should I operate in this scenario: I'm trying to fetch a CSV file from an API, once retrieved I want to process it to convert it in a json like object which then I can consume in…
Marco Ripamonti
  • 267
  • 1
  • 3
  • 12