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
22
votes
2 answers

Approaches for using RTK-Query hooks inside functions?

I've successfully written my application using Axios to fetch content. As of now, it's set up to fetch content when certain events happen (like the submit button has been clicked.) However, I'm experimenting with Redux's RTK-Query solution. This…
kevin
  • 2,707
  • 4
  • 26
  • 58
21
votes
1 answer

Redux Toolkit RTK Query sending query parameters

How do you pass query parameters to the api using Redux Toolkit RTK Query? import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; const baseUrl = 'xxxxxxx'; export const postsApi = createApi({ reducerPath: 'posts', …
Matt Herbstritt
  • 4,754
  • 4
  • 25
  • 31
20
votes
3 answers

How to invalidate RTK query caches(reset state) globally?

Project uses redux toolkit and rtk query. Data are fetched from one api, but the code is split into smaller chunks to reflect logical parts like /vehicles /users /settings ...etc After logout rtk query preserves its state, so on next login the…
Dmitry Avgustis
  • 854
  • 1
  • 9
  • 14
19
votes
3 answers

RTK Query createApi results in: "Property '....' does not exist on type 'Api"

The following code uses RTK query to create a Redux Hook: export const specialtiesApi = createApi({ reducerPath: 'specialtiesApi', baseQuery: fetchBaseQuery({ baseUrl: 'https://someplace.com/' }), endpoints: (builder) => ({ …
alcfeoh
  • 2,147
  • 1
  • 18
  • 33
18
votes
1 answer

RTK Query get state from another slice using getState()

I just started on redux yesterday and after reading up on the different libraries, I decided to use the slice route from RTK. For my async, instead of using createAsyncThunk, I decided to use RTK query and I have a question on the right way to…
LuxuryWaffles
  • 1,518
  • 4
  • 27
  • 50
17
votes
3 answers

Is there any way to fetch all the responses stored in api slice [RTK Query]?

Here's the hook which returns the data based on the page const { data, isFetching, isLoading, isError, } = useGetResourceQuery(page, perPage ); here's the api export const api = createApi({ …
Avinash
  • 1,864
  • 2
  • 21
  • 27
16
votes
2 answers

RTK Query - Infinite Scrolling, retaining existing data

I am attempting to implement infinite scrolling functionality in our current application; We first fetch the first 5 'Posts' for a page. Upon scrolling to the bottom of the page, we then fetch the next 5 Posts. This works nicely, however using the…
KwehDev
  • 261
  • 1
  • 3
  • 14
16
votes
3 answers

React Redux: How to handle errors in RTK Queries/Mutation Typescript?

I'm using Typescript with RTK mutation everything is working good but if I send any error from backend in specific JSON format like: { status: "Error", message "Something went wrong" } When I check on my browser network tab its showing me…
Obaid Aqeel
  • 199
  • 1
  • 1
  • 10
14
votes
2 answers

How to read RTK Query state without hooks in react-router 6.4

Recently new react-router 6.4 was released and it has the ability to load data before render of component. (https://reactrouter.com/en/main/start/overview#data-loading) This seems like a cool feature. And I want to use it with RTK Query, since I…
Yastrebtsov
  • 143
  • 1
  • 6
14
votes
1 answer

Type error when adding providesTags in RTK Query

I'm trying to set up cache invalidation for my project with RTK Query, but I get a type error when following the official documentation. The goal is to invalidate individual items in the fetched list of resources, but I get stuck just trying to…
MIDI
  • 151
  • 2
  • 6
14
votes
3 answers

Chain 2 queries in RTK Query

What is the proper way to chain queries if the 2nd query requires a parameter that is returned by the 1st? const { data: user } = useGetUserQuery(); The user object contains an ID that is used to run const { data: userBio} =…
Oleksandr Fomin
  • 2,005
  • 5
  • 25
  • 47
13
votes
2 answers

What is the difference between BrowserRouter and createBrowserRouter in react-router v6? Can I use createBrowserRouter without using data APIs?

I have read this in the documentation but I am not sure what the difference between BrowserRouter and createBrowserRouter. This is what it says in docs: createBrowserRouter: This is the recommended router for all React Router web projects. It uses…
Yazan Qarabash
  • 155
  • 1
  • 8
13
votes
3 answers

How to dynamically change base URL using redux-toolkit?

I use the redux toolkit to create an API The question is short: how to dynamically change the baseUrl in the API? The question in detail: Here is the createApi method An object is passed to this method, one of the keys of which is "baseQuery" export…
simont
  • 441
  • 3
  • 7
13
votes
1 answer

Connecting RTK Query API with redux reducer and selector

I think I'm missing something with regards to Redux and RTK Query tools. I'm also using RTK Query OpenAPI codegen for this. Right now I have an API that looks like this -> export const api = generatedApi.enhanceEndpoints({ endpoints: { …
Evan
  • 5,975
  • 8
  • 34
  • 63
12
votes
1 answer

How to implement multiple api call in a single query with RTK query

I'm new in RTK Query and I'm struggling with a use case I have to implement. Scenario: I have to merge the results from two API calls: the first API call is a private API call while the second one is a public API call. I need to merge the responses…
lucataglia
  • 728
  • 5
  • 18
1
2 3
…
63 64