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
0
votes
1 answer

RTK Query - Disable Immutability for Single Endpoint

I'm introducing RTK Query in my project. However, the data retrieved from one endpoint (created with createApi) is fed to the D3 library which immediately starts to mutate the data. Since RTKQ returns immutable data, D3 throws an error saying object…
sherlaimov
  • 29
  • 1
  • 5
0
votes
1 answer

how to specify when to re-trigger hook

I'm trying to update my react tool knowledge, adding RTK Was going over the overview for RTK Query https://redux-toolkit.js.org/rtk-query/overview and ended up with somwthing like this: export const todoApi = createApi({ reducerPath: 'todoApi', …
rrubiorr81
  • 285
  • 1
  • 5
  • 15
0
votes
1 answer

Websockets with RTK Query configuration issues

I am trying to implement a Websocket connection from a React TypeScript app using RTK query. At the moment I am just trying to connect to a local socket.io server BUT ultimately it will be an AWS API Gateway with Cognito auth. In any case I having…
SamBrick
  • 681
  • 1
  • 8
  • 33
0
votes
1 answer

Rtk query always returns cached data. InvalidatesTags not doing anything

Can somebody tell me why I still get the cached data after I invalidate the getUser query? api.ts: export const api = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ baseUrl: REACT_APP_API_URL, prepareHeaders: (headers, {…
0
votes
1 answer

react-toastify shows before i click

I've madenotify function which takes parameter const notify = (error) => { toast.error(error) } and dom as where error is my useState hook , which is set if something is fetched from redux rtk.…
Rajanboy
  • 2,266
  • 2
  • 8
  • 15
0
votes
1 answer

RTK Query - Delete cached data upon cacheEntryAdded

Currently we have an api endpoint that requests a single 'Group' via ID. We have a WebSocket subscription set up, and in the onCacheEntryAdded definition, we handle cases where that Group is updated, or deleted. When we receive an update message…
KwehDev
  • 261
  • 1
  • 3
  • 14
0
votes
1 answer

Get data in component tree using RTK Query

I think I misunderstand the purpose of RTK Query. Basically I have an app, where I need to login using email and password, this request returns me userId. That is my API file export const accountApi = createApi({ reducerPath:…
tykhan
  • 81
  • 8
0
votes
1 answer

Will RTK query put all data to store? if yes, why do you need to put the data in slice too?

My question will be based on this example: https://codesandbox.io/s/github/reduxjs/redux-toolkit/tree/master/examples/query/react/authentication-with-extrareducers?from-embed=&file=/src/app/services/auth.ts Without knowing how to access the data…
bbnn
  • 3,505
  • 10
  • 50
  • 68
0
votes
1 answer

How are errors structured in RTKQuery and how can I combine them in a custom hook

If I have a react view that requires two queries to be made from an RTKQuery cache/api calls, how can I combine the isLoading, error, etc? I've thought of doing the following but I'm not sure how the error objects are composed Could possibly write a…
0
votes
1 answer

Is there a need to use middleware in redux? If RTK query is being used

If I am using an external api or fetching data from database then is there any need for me to use middleware in redux toolkit or RTK query can do all the work for me?
0
votes
2 answers

RTKQuery streaming, how to limit cache entries?

So I implemented a websocket using this pattern https://redux-toolkit.js.org/rtk-query/usage/streaming-updates it works fine but my issue is that I would like to limit the total entries to 30 (websocket is sending a lot, and fast). I would need a…
François Richard
  • 6,817
  • 10
  • 43
  • 78
0
votes
0 answers

How do I group an API query into one file?

I developed a site using React and Auth0, separately about queries there is no problem, but because I have many queries I have to do all queries in one file: I used redux toolkit query but I have trouble getting authentication token as shown in the…
0
votes
1 answer

RTK Query unable to use mutation on hander in react React (with TS) hook "MultiBrandAPI.myMutation" is called conditionally."

So we're migrating to RTK Query. We've been able to work a query without any problems. But Now we're trying to do a POST, and the following problem happens. This is my function in my component.tsx file: const [postToken] =…
0
votes
1 answer

rtk query - how to update chached data without calling updateCachedData

I am working with rtk query and I have 2 different sources of data: ongoing websocket connection that updates cache with updateCachedData whenever relevant notification is received, http requests to the api to get an existing data from db The…
mnbxx
  • 55
  • 5
0
votes
1 answer

Cant perform react state cancel rtk query

I have a screen and if I press on submit and go back of the screen then I get: cant perform react state Of course, I load data which is not ready yet and after that I set a state. So I have to cancel it, when the user goes back. How I handle this ?
universe11
  • 703
  • 1
  • 11
  • 35