How to fix invalidate cache data problem in React RTK Query?

22 Views Asked by At

Peace be upon you For a few days now I have encountered a serious problem with the "Invalidating cached data for RTK Query" and I request you to view my code and see why the invalidation is not happening and after editing each user the old data is still being rendered in both "user" and "users". Thanks.

const api = createApi({
    baseQuery: axiosBaseQuery({
        baseUrl: `/`,
    }),
    endpoints(build) {
        return {}
    },
})

const userEndpoints = api.enhanceEndpoints({
    addTagTypes: ['user', 'users']
}).injectEndpoints({
    endpoints: (build) => ({

        getUsers: build.query<User[], void>({
            query: () => ({
                url: `user/getList`,
                method: 'get'
            }),
            providesTags: (result, error, arg) =>
                result
                    ? [...result.map(({ id }) => ({ type: 'user' as const, id })), 'user']
                    : ['user'],

        }),
        getUserById: build.query<User, string>({
            query: (userId) => ({
                url: `user/get/${userId}`,
                method: 'get'
            }),
            providesTags: ['user'],
        }),
        postUser: build.mutation<User, Partial<User>>({
            query: (body) => {
                return ({
                    url: `user/save`,
                    method: 'post',
                    data: body
                })
            },
            invalidatesTags: (result, error, arg) => [{ type: 'user', id: arg.id }],
        }),
    })
});

export const {
    useGetUserByIdQuery,
    useGetUsersQuery,
    usePostUserMutation,
    reducerPath: hostApiReducerPath, reducer: hostApiReducer, util } = userEndpoints;

0

There are 0 best solutions below