การอัปเดตเชิงคาดการณ์และการทำให้แคชเป็นโมฆะ

ยินดีต้อนรับ

จุดปลายทาง Mutation

export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

การใช้ Mutation Hook

const [updateUser, { isLoading }] = useUpdateUserMutation();

const handleSave = async () => {
  await updateUser({ id: 1, name: 'Alice' });
};

แท็กแคชสำหรับการทำให้ใช้ไม่ได้

endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

การทำให้แท็กใช้ไม่ได้แบบเจาะจง

providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

การอัปเดตเชิงคาดการณ์ด้วย onQueryStarted

updateUser: builder.mutation({
  query: (user) => ({ url: '/users/' + user.id, method: 'PUT', body: user }),
  async onQueryStarted(user, { dispatch, queryFulfilled }) {
    const patch = dispatch(
      userApi.util.updateQueryData('getUser', user.id, draft => {
        Object.assign(draft, user);
      })
    );
    try { await queryFulfilled; }
    catch { patch.undo(); } // roll back on error
  },
})

การทำให้แท็กประเภทเดียวกันทุกอินสแตนซ์ใช้ไม่ได้

providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

การทำให้แคชใช้ไม่ได้ด้วยตนเอง

dispatch(userApi.util.invalidateTags(['User']));

การอัปเดตแบบระมัดระวังเทียบกับแบบคาดการณ์

ควรใช้แท็กหรือดึงข้อมูลใหม่ด้วยตนเองเมื่อใด

ตรวจสอบด่วน

สรุปทบทวน

จบหลักสูตร