Stack Overflow
Stack Overflow

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
3
votes
0 answers

What is the right way to invalidate tags in RTKQ after a Firestore write operation?

THE ENVIRONMENT A ReactJS application that performs writes and read against a Firestore DB with the Firebase client SDK v9.17.1.The business logic is inside RTK Query's queryFns, so for example I call an updateTodo endpoint with the…
Ale TheFe
  • 1,540
  • 15
  • 43
3
votes
1 answer

RTK Query mutation executes twice in StrictMode

I use RTK Query for data fetching and I am having a small issue in one of the use cases. I use a mutation to verify the email address of the app user, as follows: // ...imports const ConfirmEmail = () => { const [params] = useSearchParams(); …
Damascus
  • 145
  • 9
3
votes
1 answer

Conditional fetching with Redux-Toolkit RTK-Query

I'm trying to migrate from createAsuncThunks to RTK-Query. On page load I check if there's no user in store then fetch user and other data from backend. This code works well with createAsuncThunks but how it should like with RTK-Query? const InitApp…
qweezz
  • 508
  • 4
  • 24
3
votes
0 answers

Set x-xsrf-token and send it in header during request RTK Query

I have Laravel API + NextJs application with Sanctum authentication. With Sanctum before sending request to the route, you need to send a request to /sanctum/csrf-cookie 'to initialize csrf protection'. Here i how my RTK Query API looks: enter image…
Niraj Gurung
  • 51
  • 2
3
votes
2 answers

How to use RTKQuery queryFn with TypeScript

Short description I'm trying to compile below piece of TypeScript code. Tsc isn't satisfied with my return type from the queryFn function. Am I doing something wrong or am I missing something? The code import { FetchBaseQueryError } from…
Rychu
  • 765
  • 1
  • 4
  • 20
3
votes
1 answer

Handling 302 status with RTK Query

I have a POST request which returns a 302 when successful. I need to get the location response header which holds the url I'll need to redirect to. Currently I have this: accountLogin: builder.mutation({ query: (body) => ({ url:…
Aaron
  • 80
  • 6
3
votes
1 answer

rtk-query typescript for custom queryFn on API endpoint

I am using a queryFn inside an API call using rtk-query and I cant figure out why typescript is complaining about the return value of the queryFn -- any help would be much appreciated. This is a simplified version of my code type Fields = { name:…
topched
  • 765
  • 3
  • 11
3
votes
1 answer

RTK query POST method does not mutate data

I am trying to fetch some data with RTK. GET method works properly. POST method also works but does not mutate data. I added provideTags and invalidateTags also for automatic refetch but still could not make it. this is my store import {…
Rustam
  • 33
  • 5
3
votes
1 answer

Difference between useSelector and useAppSelector?

I came across useAppSelector while using redux with RTK query. So what will be the difference between useSelector and useAppSelector gonna be or both works in the same way?
Anshik gupta
  • 61
  • 6
3
votes
2 answers

Accessing RTK Query data & state across multiple components

I'm using RTK Query to fetch some data. I need to access the loading state across various components in my application, but I'm unsure how to do so. I feel like it may simply be that I'm misunderstanding how to utilize RTK Query properly in a…
Gurnzbot
  • 3,742
  • 7
  • 36
  • 55
3
votes
0 answers

Rtk query graphql file upload

Doing my first app with redux toolkit and rtk query. I have "@rtk-query/graphql-request-base-query": "^2.1.0", and "graphql-request": "^4.2.0", I get mutations and queries working but cannot figure out how to properly do the file upload. I know how…
user9013856
  • 328
  • 2
  • 10
3
votes
1 answer

RTK Query with AppSync returns status "rejected"

I'm developing a react app using RTK Query & AppSync (graphQL). I tried a query request as follows, but always the redux status is "rejected" saying "Cannot read properties of undefined (reading 'filter')" (Please check a pic below). It seems the…
Yozz
  • 435
  • 5
  • 16
3
votes
2 answers

How to configureStore Mutiple middleware in RTK query

redux-toolkit given original doc-- import { configureStore } from '@reduxjs/toolkit' // Or from '@reduxjs/toolkit/query/react' import { setupListeners } from '@reduxjs/toolkit/query' import { pokemonApi } from './services/pokemon' export const…
Gagan Rihal
  • 199
  • 2
  • 11
3
votes
3 answers

Redux Toolkit RTK-Query Cors issue

I'm trying to get data from the public Deezer Api located here : https://api.deezer.com/. To fetch that data i'm using RTK-Query from reduxtoolkit like so (to then use it in my components using hooks i get from each endpoints) : export const…
Dimitri Enjelvin
  • 65
  • 1
  • 2
  • 7
3
votes
1 answer

Why is there less need to normalize state with RTK Query?

According to the redux docs: "While there is less need to store the response in a normalized lookup table with RTK Query managing caching data, transformResponse can be leveraged to do so if desired." Why there is "less need" with RTK Query…
David
  • 4,191
  • 2
  • 31
  • 40
1 2 3
…
63 64