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

Redux RTK Query: Invalidating only single element from list

I have the following API defined for the RTK query: export const postsApi = createApi({ reducerPath: "postsApi", baseQuery: fetchBaseQuery({ baseUrl: 'https://myservice.co/api/v2/' }), tagTypes: ["Posts"], endpoints: (builder) => ({ …
drodil
  • 2,292
  • 1
  • 22
  • 37
5
votes
1 answer

Redux ToolKit Query - Make multiple queries in the same component dependant on each other

I'm trying to use RTK Query in a NextJS app to fetch multiple entities from an API. I have the App and AppVersion models. When the component loads I need to fetch the App and then fetch the appropriate AppVersions. An App has the currentVersionId…
adrianthedev
  • 626
  • 1
  • 11
  • 21
4
votes
1 answer

How to use useQuery with React Async Select

https://react-select.com/async: React async Select Library https://redux-toolkit.js.org/rtk-query/overview: RTK Query How to utilise the methods provided by useQuery with React Async library. I was unable to utilise this because refetch does not…
kshitiz saini
  • 165
  • 1
  • 9
4
votes
1 answer

Request with header {"Content-Type": "multipart/form-data;"} sends empty req.body

I'm trying to save the formData below to MongoDB. In the payment below, "attachments" is a FileList. What's happening is the response in the create controller returns an empty body when the header content type is multipart/form-data. Otherwise, the…
Breldan
  • 73
  • 6
4
votes
2 answers

How to postpone refetching of invalidated RTK query

RTK query seems to work so that when cached results get invalidated, the invalidated query is being re-fetched immediately. I would expect that a re-fetch would execute when the program requests invalidated data, but not sooner. Real world use…
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
4
votes
2 answers

Redux Tool Kit Query: Need same data in different two components but without duplicate requests

I'm new to rtk and rtk query , I'm using rtk query. I have two components I need the same data for each, I do not want to call the function twice in each component to get the same data, is there a way to only call it one time then for better…
4
votes
1 answer

What addon axios have that RTK query fetchBaseQuery util is missing?

In the documentation of the RTK query, this is the introduction that is provided to the fetchBaseQuery util: This is a very small wrapper around fetch that aims to simplify requests. It is not a full-blown replacement for axios, superagent, or any…
Yedidya Rashi
  • 1,012
  • 8
  • 18
4
votes
1 answer

How to access the query arguments in transformResponse with redux toolkit query (RTKQ)?

I am making a POST call using the RTK query. I am able to pass the payload data to my query, But I want to access the query arguments 'id' inside my transformResponse function. but found no ways to do so. below is my code export const apiSlice =…
Zainul Abideen
  • 1,829
  • 15
  • 37
4
votes
1 answer

RTK Query: undefined extraOptions inside prepareHeaders

I set extraOptions in my endpoint like so : const myApi = api.injectEndpoints({ endpoints: builder => ({ changePassowrd: builder.mutation({ query: (data) => ({ url: `${Config.BASE_URL}/users/${data.userId}`, …
abdou-tech
  • 687
  • 1
  • 8
  • 16
4
votes
2 answers

RTKQ - Select data without hooks

I'm trying to select cached data from RTKQ without using the auto-generated query hook, but I'm having trouble understanding the docs const result = api.endpoints.getPosts.select()(state) const { data, status, error } = result This is how the docs…
dev.tom
  • 489
  • 2
  • 5
  • 16
4
votes
1 answer

Make RTK Query onCacheEntryAdded return error

// App.tsx ... export const App: React.FC = () => { const { data, error } = useGetUsersQuery() useEffect(() => { console.error(error) }, [error]) } // api.ts ... export const api = createApi({ ... endpoints: (build) => ({ ... …
Footniko
  • 2,682
  • 2
  • 27
  • 36
4
votes
1 answer

Cannot read properties of undefined (reading [api.reducerPath]) at Object.extractRehydrationInfo after clearing browser data

I have used redux persist with RTK query and redux toolkit. After clearing browser data manually from browser settings, it could not rehydrate RTK query reducer and showing Uncaught TypeError: Cannot read properties of undefined (reading…
Hasan
  • 41
  • 4
4
votes
0 answers

How to use cached data returned by a rtk-query query

I have a react-toolkit query that after a first successful request cached the response as expected, then in subsequent requests it's using the cached response. I'm ok with that. In the store I have a slice that is watching the above mentioned query…
4
votes
1 answer

RTK Query run query only after user stops typing in search field

I'm a little bit confused about using useEffect,useCallback and running RTK Queries. What I'm trying to achieve is users would be able to search movies based on an input field provided in the app. There is a Home Page with an input field for users…
Naderjlyr
  • 165
  • 4
  • 13
4
votes
3 answers

How to test RTK Query with react testing library?

I'm trying to work with RTK Query, but can't find a good example of how to write unit tests with react testing library for a component that uses requests with RTK Query. For example, we have a component that gets a list of something from server. How…
Denis
  • 43
  • 1
  • 1
  • 4