CODEWITHSUNDEEP
reactjsredux-toolkitrtk-query
maxflow
maxflow

Reputation: 939

RTK Query failing to fetch new data after mutation

I'm trying to use RTK query to fetch data from Firestore using the queryFn. The problem I'm having is that I'm developing a multiwizard, where the fields in the form are initialised with data straight from RTK Query.

Update an input field with a mutation in step 1 Go to step 2 Go back to step 1 (fetch is rejected with a ConditionError, please see attached log)

export const userApi = createApi({
    reducerPath: 'userApi',
    baseQuery: fakeBaseQuery(),
    tagTypes: ['User'],
    endpoints: builder => ({
        getUser: builder.query<Customer, string>({
            async queryFn(userId) {
                try {
                    const docSnapshot = await getDoc(doc(db, 'users', userId));
                    const customer = docSnapshot.data() as Customer;
                    return { data: customer };
                } catch (err) {
                    return { error: err };
                }
            },
            providesTags: (result, error, arg) => [{type: 'User', id: result.id }]
            
        }),
        updateUser: builder.mutation<{ success: boolean }, { userId: string; user: Partial<UserInfo> }>({
            async queryFn(payload) {
                const { userId, user } = payload;
                try {
                    // Note: Id is same for both. Have also tried replacing with 'LIST'
                    const res = await updateDoc(doc(db, 'users', userId), { ...user });
                    return { data: { success: true } };
                } catch (err) {
                    return { error: err ? err : null };
                }
            },
            invalidatesTags:  (result, error, { userId }) => [{ type: 'User', id: userId}],
        })
    })
});

export const { useGetUserQuery, useUpdateUserMutation } = userApi;

I've also tried just using User for the providesTag/invalidatesTags.

I'm trying to figure out why the 2nd query, after going back to step 1 of the form fails to retrieve the data I've just updated.

enter image description here enter image description here

Upvotes: 0

Views: 960

Answers (1)

maxflow
maxflow

Reputation: 939

I fixed this issue by updating rtk from 1.8.5 to 1.9.0

Seems like there was a bug

invalidateTags works correctly when dealing with persisted query state.

https://github.com/reduxjs/redux-toolkit/releases/tag/v1.9.0

Upvotes: 0

Related Questions