Redux Toolkit · RTK Query · all subjects

cache-management/upsertquerydata

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

upsertQueryData signature and parameters

upsertQueryData is a Redux thunk action creator with signature: const upsertQueryData = <T>(endpointName: string, arg: any, newEntryData: T) => ThunkAction<Promise<CacheEntry<T>>, PartialState, any, UnknownAction>. Parameters are: endpointName (a string matching an existing endpoint name), arg (an argument matching that used for a previous query call, used to determine which cached dataset needs to be updated), newEntryValue (the value to be written into the corresponding cache entry's data field).

upsertQueryData behavior

upsertQueryData acts as an artificial API request to upsert a value into the cache. If no cache entry for that cache key exists, a cache entry will be created and the data added. If a cache entry already exists, it will overwrite the existing cache entry data. The thunk executes asynchronously and returns a promise that resolves when the store has been updated. This includes executing the transformResponse callback if defined for that endpoint. If dispatched while an actual request is in progress, both the upsert and request will be handled as soon as they resolve, resulting in a "last result wins" update behavior.

upsertQueryData example

Example: await dispatch(api.util.upsertQueryData('getPost', { id: 1 }, { id: 1, text: 'Hello!' }))

upsertQueryData thunk purpose and behavior

upsertQueryData is a thunk exported from api.utils that creates or replaces cache entries. It is intended to perform replacements to existing cache entries or creation of new ones. Since upsertQueryData does not have access to the previous state of the cache entry, the update may be performed only as a replacement. In comparison, updateQueryData allows patching of the existing cache entry, but cannot create a new one.

upsertQueryData use case example

One example use case for upsertQueryData is pessimistic updates. If the client makes an API call to create a Post, the backend could return its complete data including the id. Then upsertQueryData can be used to create a new cache entry for the getPostById(id) query, preventing an extra fetch to retrieve the item later.

Pessimistic update mutation example with upsertQueryData

async onQueryStarted({ id }, { dispatch, queryFulfilled }) { try { const { data: createdPost } = await queryFulfilled const patchResult = dispatch( api.util.upsertQueryData('getPost', id, createdPost), ) } catch {} } This example shows a pessimistic update mutation for creating a post, where the server response is used to create a new cache entry via upsertQueryData.

Give your agent this brain