I'm using rtk query to fetch data and show in component. I can see data is coming and i can get data in frontend. Here is the values i get from query ,
const { currentData, isFetching, isError } = useListStudentQuery()
It put it on Home.js
and fetched data .
If i navigate to /create/student
from Link in Header and create a mutation to create a student.
const navigate = useNavigate()
const [createStudent, {data, isError, isLoading, isSuccess, error}] = useCreateStudentMutation();
useEffect(() => {
// if success
if(isSuccess){
navigate("/")
})
If success i would be navigate to /
. When i do so , i cant see my updated list, rather only old list .
In Home.js
As per documentation for showing data i've just returned data like this
return (
currentData && currentData.students.map(student => (
<Table list={student} key={student._id}/>
))
)
Is there something wrong i'm doing. Very thankful for your help.
CodePudding user response:
RTK Query is a cache. As such it has the job of keeping server responses in state and not causing unnecessary requests.
If your mutation changed something another query relied on, you have to tell RTK Query to refetch that data from the server - using automatic invalidation with providesTags
and invalidatesTags
.
I would highly recommend you read chapters 7 and 8 of the Redux tutorial