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

Infinite scroll with RTK (redux-toolkit)

I'm struggling to implement full support of infinite scroll with cursor pagination, adding new elements and removing. I have used great example from github discussion https://github.com/reduxjs/redux-toolkit/discussions/1163#discussioncomment-876186…
Kostya Zgara
  • 73
  • 1
  • 6
4
votes
0 answers

Server-Sent Events with RTK Query, Redux store. Can this work? (react-native)

I'm working on an app similar to Trello in that it needs to pull data from the server as soon as it's added by other users. There is no need to send data back using the same channel, so Server-Sent Events (unidirectional) push technology seems more…
4
votes
1 answer

RTK Query tags not invalidating/ refetching

I'm sure there is something simple and basic that I am missing, but I've looked at all the threads and docs I can find and am not figuring out what I'm not getting here. I just started implementing RTK Query onto a react app and have been going…
Jowz
  • 399
  • 1
  • 3
  • 16
4
votes
1 answer

How to update returned hook data from RTK Query when a websocket message is received

Please can someone explain how to wire up the receiving of data in a websocket message to the data object of the hook from an RTK Query api endpoint? We don't need to store the message that is received, we just want to pass it on in the data…
SamBrick
  • 681
  • 1
  • 8
  • 33
4
votes
5 answers

Undefined Error when Fetching API using RTK Query React/Redux

I keep getting this same error of undefined data for multiple components in my data, it was working fine but for some reason it stops in fetching data and starts giving undefined out of the blue. this is my store.js import {configureStore,…
Raghav
  • 41
  • 1
  • 5
4
votes
2 answers

MUI Datagrid - TypeError: Cannot read properties of undefined (reading 'name')

Im using Material UI's datagrid to show some data in a table, I recently switched over to RTK query from redux for caching and to get rid of the global state management in the project but encountered a problem as mentioned in the title. The error…
new_ting
  • 49
  • 1
  • 5
4
votes
2 answers

How to handle error format in Redux-toolkit rtk-query graphql application

I'm developing an application based on redux-toolkit rtk-query and graphql. I use graphql-codegen to generate the reducers starting from the graphql schema and everything working as expected. Now i have a problem to handle errors. Has i understand…
dna
  • 2,097
  • 1
  • 11
  • 35
4
votes
1 answer

How to setup 404 or 500 error handlers with Redux Toolkit and RTKQuery

I'm using RTKQuery to fetch data as following: export const productsApi = createApi({ reducerPath: 'productsApi', baseQuery: fetchBaseQuery({ baseUrl: BASE_URL, prepareHeaders, }), tagTypes: ['Products'], keepUnusedDataFor: 8600, …
Y M
  • 2,105
  • 1
  • 22
  • 44
4
votes
2 answers

How can I call Rtk Query Hook when the condition changes?

I created the endpoint with createApi: export const postsApi = createApi({ reducerPath: 'postsApi', baseQuery: fetchBaseQuery({baseUrl: 'https://jsonplaceholder.typicode.com/'}), tagTypes: ['Post'], endpoints: builder => ({ getPosts:…
4
votes
1 answer

App wide RTK query loading & fetching indicator

In my React app, I am using RTK query to fetch data. I have 10+ API endpoints and a route for each one of the endpoints. I want to show a horizontal line at the top of the page to indicate that the data fethcing is going on. At the moment, I have…
mahan
  • 12,366
  • 5
  • 48
  • 83
4
votes
1 answer

The right way to use conditional header in rtk query?

I use rtk query and I want to pass header authentication for all of request except refresh token without header and this is my code is there a way to have condition or pass header to be empty? or can I have 2 fetchBaseQuery one for wieth header and…
Mahdi Zeynali
  • 133
  • 1
  • 1
  • 9
4
votes
2 answers

Proper way to call RTK Query endpoint.select() with no arguments (and skip options)

I would like to use the endpoint.select() function to create selectors from cached RTK Query data, see RTK Advanced Patterns. The documentation clearly states that if there is no query argument, you can pass undefined to select() (see the Selecting…
DannyMoshe
  • 6,023
  • 4
  • 31
  • 53
4
votes
2 answers

RTK Query invalidatesTags doesn't seem to remove cached data every time

I have an RTK Query mutation endpoint rejectApplication, that invalidates the getApplication query. These are in the same API. rejectApplication: builder.mutation({ query: (applicationId) => ({ url:…
niemelsa
  • 125
  • 2
  • 5
4
votes
1 answer

RTK Query - how to access headers?

I have a working RTK Query api, reading from a backend that after a successful login was sending the token in the payload. The backend API changed and now the token comes in the response's Authorization header and I can't figure out how to read…
rikas
  • 482
  • 4
  • 25
4
votes
1 answer

disable RTK Query prepareHeaders on specific endpoint

how to disable prepareHeaders on specific endpoint?, for example, i dont need authorization header on login or register endpoint, but on some endpoint i need authorization headers. export const backendService = createApi({ reducerPath:…