Home > OS >  rtk query doesn't update api data
rtk query doesn't update api data

Time:05-25

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

  • Related