Почему не работает кэш по умолчанию для useMutation?

Question

[MishaXXL]

Есть апишка, которая в аргумент принимает название одной из таблиц апи
В документации написано, что кэш встроен по умолчанию
По крайней мере в useQueryесть свойство keepUnusedDataFor, которое по умолчанию 60 сек.
Что-то похожего для useMutationя не смог найти
Каждый раз при запросе происходит новый запрос на сервер, хотя секунду назад запрос по такому апи уже был

export const rootApi = createApi({
    reducerPath: 'root',
    tagTypes: ['root'],
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getTable: builder.mutation({
            query: (table) => `${table}`
        })
    })
});

export const { useGetTableMutation } = rootApi

const [getTable, { data = [], isLoading }] = useGetTableMutation()

function handleClick(link: string) {
   getTable(table)
}

Как настроить кэш для useMutation?

Answer 1

[chemdev]

Это противоречит самой логике mutation. Напиши builder.query вместо этого.

Comments

[MishaXXL]

Но мне нужно делать запросы по нажатию кнопки, а query автоматический запускает запрос при рендере
Или как это сделать через builder.query?

[chemdev]

MishaXXL, useLazyQuery в помощь. В документации смотри, работает именно по явному вызову.

[MishaXXL]

chemdev, спасибо, нашел
А mutation получается только для тех случаев, когда нужно исключить кэширование, верно?

[MishaXXL]

chemdev, а сейчас почему кэш не работает? )

export const rootApi = createApi({
    reducerPath: 'root',
    tagTypes: ['root'],
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getTable: builder.query({
            query: (table) => `${table}`,
            keepUnusedDataFor: 120,
        })
    })
});

export const { useLazyGetTableQuery } = rootApi

[chemdev]

MishaXXL, покажи, как ты используешь хук?

[MishaXXL]

chemdev,

const [getTable, { data = [], isLoading }] = useLazyGetTableQuery()

function handleClick(url: string) {
   getTable(url)
}

<button onClick={() => handleClick(table.url)}>{table.name}</button>

[chemdev]

MishaXXL,

useLazyQuery
Returns a tuple with a trigger function, the query result, and last promise info. Similar to useQuery, but with manual control over when the data fetching occurs. Note: the trigger function takes a second argument of preferCacheValue?: boolean in the event you want to skip making a request if cached data already exists.

Возвращает кортеж с функцией запуска, результатом запроса и информацией о последнем запросе. Аналогично useQuery, но с ручным управлением, когда делать запрос. Примечание: функция trigger принимает второй аргумент preferCacheValue?: boolean в том случае, если вы хотите пропустить выполнение запроса, если кэшированные данные уже существуют.

[chemdev]

MishaXXL, почитал доку за тебя но в принципе рад, не помнил этих подробностей)

[MishaXXL]

chemdev, спасибо, я это читал, но думал, что кэш настраивается свойством в апи и наоборот это для принудительного обновления кэша на всякий случай, и все запросы по умолчанию берутся из кэша

[chemdev]

MishaXXL, ну так все и работает с дефолтным хуком. А с ленивым чтобы не было логической несостыковки (вроде ты триггеришь запрос а реального запроса нет), ты должен уже явно сказать смотреть ли кэш.

[MishaXXL]

chemdev, подскажи пожалуйста, а для чего тогда нужен useMutation, если через useQuery можно все реализовать?

[chemdev]

MishaXXL, ну есть туториал и он небольшой на оф сайте. Там все предельно раскрывается.