RTK Query создаёт новые стейты после изменения аргумента, передаваемого в хук

Рейтинг: 0Ответов: 2Опубликовано: 29.07.2023

Моё почтение. не могу разобраться со следующим моментом RTK Query. У меня есть API с которой я получаю список игр по эндпойнту .../games. Дальше можно указать параметры фильтрации и вернётся список уже отфильтрованных игр. В связи с этим createApi выглядит так:

gamesApi = createApi({
    reducerPath: "gamesList",
    baseQuery: fetchBaseQuery({baseUrl: "https://api.rawg.io/api/"}),
    endpoints: build => ({
        getGamesList: build.query({
            query: (filtersQuery) => `games?key=${TOKEN}${filtersQuery}`,
        }),
    }),
});

т.е. я передаю в него либо пустую строку и получаю список игр, либо параметры фильтрации и получаю отфильтрованный список. Но проблема в том, что когда я вызываю хук useGetGamesListQuery и передаю в него строку с настройками фильтрации вместо пустой строки, результат сохраняется в новый стейт, как показано:

getGameList(""): {} 7 keys
getGameList("&order=name&platform=4&genres=40,2,14&metacritics=50"): {} 7 keys

Если ещё раз поменять фильтры, то появится уже третий стейт с аргументом в виде новой строки и так далее.

Собственно, вопрос заключается в том, как сделать так, чтобы все эти ребята сохранялись в один стейт, чтобы на основе него происходил ререндер и контент на странице менялся?

javascript reactjs typescript react-hook запрос
Источник: Stack Overflow на русском

Ответы

▲ 0

Нужно использовать параметр keepUnusedDataFor при создании эндпоинта, это позволит хранить данные в течение определенного времени:

endpoints: build => ({
    getGamesList: build.query({
      query: filters => `games?key=${TOKEN}${filtersQuery}`,
      keepUnusedDataFor: 5 * 60 // например, 5 минут
    })
  })

Теперь при смене фильтров данные не будут удаляться из стейта и компонент сможет повторно использовать их для ререндера. Для ознакомления: раздел на redux-toolkit.js.org

▲ 0

Вопрос закрыт. Оказывается я неправильно понял суть RTK query в целом. Я думал он сам помещает результат фетча в стор и чтобы отрисовать контент по результатам этого фетча, мне нужно к нему обратиться в сторе. Вот я и ломал голову три дня зачем он каждый раз создаёт новый стейт и как вообще мне к нему обратиться в таком случае. Переосмыслив подход, я нашёл такое решение моей ситуации:

  1. В слайсе создал стейт query с текущим url, который по дефолту пустая строка.
  2. Когда маунтится компонент со списком игр, вызывается хук useGetGamesListQuery(query). Так как query - пустая строка по дефолту, то он фетчит мне список всех игр.
  3. Когда меняются фильтры и формируется url запроса, по нажатию на кнопку принятия фильтров диспатчится новый url в query, что в свою очередь запускает ререндер и компонент gamesList фетчит список игр по уже новому url с учётом фильтров

Возможно кому-нибудь как и я начинающему будет полезна эта информация.