RTK-запрос: как сделать недействительным тег для конечной точки с определенным заголовком параметра? ⇐ Javascript
RTK-запрос: как сделать недействительным тег для конечной точки с определенным заголовком параметра?
Я использую запрос RTK для своего приложения. Мое приложение имеет бесконечную прокрутку, и я использую что-то вроде этого, чтобы объединить новую страницу со старыми
getJobs: builder.query, JobFilterParamType>({ запрос: (параметры) => ({ URL: `${jobRequirement}/`, параметры, }), SerializeQueryArgs: ({ queryArgs }) => { //ссылка: https://rohitbels.medium.com/pagination ... 65ac25c3bd const newQueryArgs = { ...queryArgs }; если (newQueryArgs.page) { удалить newQueryArgs.page; } вернуть новыйQueryArgs; }, merge: (currentCache, newItems) => { //сводка: объединить старую страницу с новой если (currentCache.results) { возвращаться { ...текущийКэш, ...новые предметы, результаты: [...currentCache.results, ...newItems.results], }; } вернуть новые элементы; }, обеспечиваетТеги: (данные) => данные? [{ type: "Jobs", id: "LIST" }] : [{ type: "Jobs", id: "LIST" }], //TODO: обработать ошибку }) Для справки: я получаю данные от API как таковые:
{ количество: 30; далее: 'https://..../?page=2'; предыдущее: ноль; Результаты: [{...}, {...}, ...]; } Поскольку я делаю это при исправлении элемента из этого списка, я не могу просто сделать недействительной конечную точку getJobs, так как это удалит из пользовательского интерфейса всю страницу, кроме страницы 1.< /п> Поэтому я обрабатываю обновление элемента как таковое:
patchJob: builder.mutation>({ запрос: ({id, ...data}) => ({ URL: `${jobRequirement}/${id}`, метод: «ПОСТ», тело: данные, }), асинхронный onQueryStarted (данные, {отправка, queryFulfilled}) { константный фильтр = store.getState().jobFilter; // это срез, в котором хранятся данные фильтра заданий const patchResult = отправка( api.util.updateQueryData("getJobs", filter, (черновик) => { const indexOfUpdatedJob = Draft.results.findIndex((job) => job.id === data.job_requirement); Draft.results[indexOfUpdatedJob] = данные; //сводка: обновление элемента }) ); пытаться { ожидайте выполнения запроса; } ловить { патчРезультат.отменить(); } }, validatesTags: (результат) => { вернуть результат? [{ type: "Работа", id: result.job_requirement }] : []; }, }) Приведенный выше код работает отлично
Теперь проблема в том, что допустим, я не добавил ни одного фильтра, а конечной точкой является /jobs?page=1, а позже я добавляю фильтр, например /jobs?page=1&skill=123. Теперь обе конечные точки кэшируются. Если бы мне пришлось внести какие-либо изменения в элемент, когда пользователь находится на /jobs?page=1, и этот элемент также существует на /jobs?page=1&skill=123, то этот элемент будет обновлять только кеш /jobs?page=1, а не кэш /jobs?page=1&skill=123.
Я не могу сделать недействительной конечную точку getJobs, поскольку список заданий и элемент заданий исправления находятся на одной странице. Если бы я сделал его недействительным, список обновлялся бы при каждом изменении элемента задания, а прокрутка подпрыгивала бы вверх.
Я могу придумать следующее решение:
[*]Обновите элемент во всех вариантах заголовка конечной точки. Сейчас мы делаем это только для /jobs?page=1. Необходимо также сделать это и для /jobs?page=1&skill=123 [*]Или сделать недействительными все остальные варианты конечной точки, кроме того, на котором в данный момент находится пользователь.
Я хочу знать, как мы можем сделать вышеперечисленное в RTK. Любой из двух методов подойдет.
Спасибо.
Я использую запрос RTK для своего приложения. Мое приложение имеет бесконечную прокрутку, и я использую что-то вроде этого, чтобы объединить новую страницу со старыми
getJobs: builder.query, JobFilterParamType>({ запрос: (параметры) => ({ URL: `${jobRequirement}/`, параметры, }), SerializeQueryArgs: ({ queryArgs }) => { //ссылка: https://rohitbels.medium.com/pagination ... 65ac25c3bd const newQueryArgs = { ...queryArgs }; если (newQueryArgs.page) { удалить newQueryArgs.page; } вернуть новыйQueryArgs; }, merge: (currentCache, newItems) => { //сводка: объединить старую страницу с новой если (currentCache.results) { возвращаться { ...текущийКэш, ...новые предметы, результаты: [...currentCache.results, ...newItems.results], }; } вернуть новые элементы; }, обеспечиваетТеги: (данные) => данные? [{ type: "Jobs", id: "LIST" }] : [{ type: "Jobs", id: "LIST" }], //TODO: обработать ошибку }) Для справки: я получаю данные от API как таковые:
{ количество: 30; далее: 'https://..../?page=2'; предыдущее: ноль; Результаты: [{...}, {...}, ...]; } Поскольку я делаю это при исправлении элемента из этого списка, я не могу просто сделать недействительной конечную точку getJobs, так как это удалит из пользовательского интерфейса всю страницу, кроме страницы 1.< /п> Поэтому я обрабатываю обновление элемента как таковое:
patchJob: builder.mutation>({ запрос: ({id, ...data}) => ({ URL: `${jobRequirement}/${id}`, метод: «ПОСТ», тело: данные, }), асинхронный onQueryStarted (данные, {отправка, queryFulfilled}) { константный фильтр = store.getState().jobFilter; // это срез, в котором хранятся данные фильтра заданий const patchResult = отправка( api.util.updateQueryData("getJobs", filter, (черновик) => { const indexOfUpdatedJob = Draft.results.findIndex((job) => job.id === data.job_requirement); Draft.results[indexOfUpdatedJob] = данные; //сводка: обновление элемента }) ); пытаться { ожидайте выполнения запроса; } ловить { патчРезультат.отменить(); } }, validatesTags: (результат) => { вернуть результат? [{ type: "Работа", id: result.job_requirement }] : []; }, }) Приведенный выше код работает отлично
Теперь проблема в том, что допустим, я не добавил ни одного фильтра, а конечной точкой является /jobs?page=1, а позже я добавляю фильтр, например /jobs?page=1&skill=123. Теперь обе конечные точки кэшируются. Если бы мне пришлось внести какие-либо изменения в элемент, когда пользователь находится на /jobs?page=1, и этот элемент также существует на /jobs?page=1&skill=123, то этот элемент будет обновлять только кеш /jobs?page=1, а не кэш /jobs?page=1&skill=123.
Я не могу сделать недействительной конечную точку getJobs, поскольку список заданий и элемент заданий исправления находятся на одной странице. Если бы я сделал его недействительным, список обновлялся бы при каждом изменении элемента задания, а прокрутка подпрыгивала бы вверх.
Я могу придумать следующее решение:
[*]Обновите элемент во всех вариантах заголовка конечной точки. Сейчас мы делаем это только для /jobs?page=1. Необходимо также сделать это и для /jobs?page=1&skill=123 [*]Или сделать недействительными все остальные варианты конечной точки, кроме того, на котором в данный момент находится пользователь.
Я хочу знать, как мы можем сделать вышеперечисленное в RTK. Любой из двух методов подойдет.
Спасибо.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение