i want to change the cach key dynamically in my slice
my component where i am calling the useQueryHook
const { seller_id, status } = useSelector((state) => state.vrpFilter);
const dispatch = useDispatch();
const { data, isSuccess } = useGetVrpListQuery({
seller_id,
status,
});
in the docs it is mentioned that we need to change the cach key so
in my slice
export const vrpListSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
getVrpList: builder.query({
query: ({ seller_id, status }) =>
`/vrp?seller_id=${seller_id}&status=${status}`,
transformResponse: (responseData) => {
const loadedVrpList = responseData.data;
console.log(loadedVrpList);
return vrpListAdapter.setAll(initialState, loadedVrpList);
},
providesTags: (result, error, arg) => [
{ type: "Vrp", id: "vrpList" },
...result.ids.map((id) => ({ type: "Vrp", id })),
],
}),
}),
});
export const { useGetVrpListQuery } = vrpListSlice;
export const createSelectsVrpListResult = (seller_id, status) =>
vrpListSlice.endpoints.getVrpList.select({ seller_id, status });
export const selectsVrpListResult = (state) => {
const sellerId = state.vrpFilter.seller_id;
const status = state.vrpFilter.status;
return createSelectsVrpListResult(
sellerId,
status
)(state);
};
const selectVrpListData = createSelector(
selectsVrpListResult,
(vrpListResult) => vrpListResult.data
);
export const {
selectAll: selectVrpList,
selectById: selectVrpById,
selectIds: selectVrpIds,
} = vrpListAdapter.getSelectors(
(state) => selectVrpListData(state) ?? initialState
);
but i am getting a warning error:
inputStabilityCheck.ts:46 An input selector returned a different result when passed same arguments.
This means your output selector will likely run more frequently than intended.
Avoid returning a new reference inside your input selector, e.g.
createSelector([state => state.todos.map(todo => todo.id)], todoIds => todoIds.length)
{arguments: Arguments(1), firstInputs: Array(1), secondInputs: Array(1),
i want to change the cachkeys in select dynamically.its working fine but with a warning
export const createSelectsVrpListResult = (seller_id, status) =>
vrpListSlice.endpoints.getVrpList.select({ seller_id, status });
export const selectsVrpListResult = (state) => {
const sellerId = state.vrpFilter.seller_id;
const status = state.vrpFilter.status;
return createSelectsVrpListResult(
sellerId,
status
)(state);
};
const selectVrpListData = createSelector(
selectsVrpListResult,
(vrpListResult) => vrpListResult.data
);
export const {
selectAll: selectVrpList,
selectById: selectVrpById,
selectIds: selectVrpIds,
} = vrpListAdapter.getSelectors(
(state) => selectVrpListData(state) ?? initialState
);