Problem with queryFulfilled

[pencil-user]

Hello,

Theres's something that is not clear to me regarding RTK Query and pessimistic updates. Say that we have this situation. There is an Api that gets list of stuff and can delete individual items. Then there is a stuff list displaying individual items each with delete button and its own mutation hook:

ApiSlice:

    export interface Stuff {
        ID:number,
        Title:string    
    }
    
    export const apiSlice = createApi({
      reducerPath: 'apiSlice',
      baseQuery: fetchBaseQuery({
        baseUrl: `${CONFIG.BACKEND_URL}/api`,
      }),
      tagTypes: ['stuff'],
      endpoints: (builder) => ({
        // stuff endpoints
        getStuff: builder.query<Stuff[], void>({
          query: () => `/stuff`,
          providesTags: ['stuff']
        }),
        deleteStuff: builder.mutation<number, number>({
          query: (ID: number) => ({
            url: `/stuff/${ID}`,
            method: "DELETE",
          }),
          async onQueryStarted(ID, { dispatch, queryFulfilled }) {
            try {
              const _ID = await queryFulfilled
              dispatch(
                apiSlice.util.updateQueryData('getStuff', undefined, (stuff) => {
                  const index = stuff.findIndex(x => x.ID === ID)
                  if (index > -1) (stuff.splice(index, 1))
                })
              )
            } catch { }
          },
    
          invalidatesTags: (result, error, arg) =>
            error ? [] : ['stuff']
        }),

Components:

    function StuffItem({Item}:{Item:stuff}){
        const [deleteStuff, result] = useDeleteStuffMutation()
        if(result.isLoading) return <div>deleting item....</div>
        
        return (
        <div>
            <div>{Item.Title}</div>
            <div><button onClick={()=>deleteStuff(Item.ID)}>delete item</button></div>
        </div>)
    }
    
    function ShowStuffList (){
        const {isLoading, isError, data} = useGetStuffQuery()
        if(isLoading) return <div>Loading</div>
        if(isError || !data) return <div>there was an error!</div>
        return(
            <div>
                {data.map(item=> <StuffItem key={item.ID} Item={item}/>)}
            </div>)
    }

What is happening is that when I click delete item, deleting item... loader shows then disapears, and then item gets removed a bit later. Functionality I want is that Item gets removed at the same time loader disappers (i.e. simultaneously).

Item does get deleted immediately if I comment out await queryFulfilled line but then it is just optimistic update and loader is never shown. But basically the problem is that queryFulfilled takes too long (or loader shows too short)

Other than not being able to figure this out RTK Query is excelent.

[Dovakeidy]

I don't think that this code is correct:

try {
    const _ID = await queryFulfilled
    dispatch(
      apiSlice.util.updateQueryData('getStuff', undefined, (stuff) => {
        const index = stuff.findIndex(x => x.ID === ID)
        if (index > -1) (stuff.splice(index, 1))
      })
    )
  } catch { }

queryFulfilled return an object with the data and meta property. I think your pessimistic update is not working and what you describe here :

"What is happening is that when I click delete item, deleting item... loader shows then disapears, and then item gets removed a bit later. Functionality I want is that Item gets removed at the same time loader disappers (i.e. simultaneously)."

Is the result of the refetch implied by the cache invalidation. Not the pessimistic update.

Try this instead:

  const { data: _ID } = await queryFulfilled