I build an applicant with Redux RTK with createEntity

Two issue that I couldn’t found it on the docs

  1. CreateEntity is only return {ids: [], entities: []}? Is possible that return eg: totalPage from the response also?
  2. Cache page only work on the hardcode initialState in createSlice if the pageQuery is same.

First question:
Getting the response from server was

{
  users: [{id: 1}, ...]
  totalPage: 100
}

I’d like to send totalPage to auto generated hook also.

export const usersAdapter = createEntityAdapter({})

export const initialState = usersAdapter.getInitialState()

export const usersApiSlice = apiSlice.injectEndpoints({
 endpoints: (builder) => ({
   getUsers: builder.query({
     query: (args) => {
       return {
         url: '/api/users',
         method: 'GET',
         params: { page: 1, limit: 10 }
       }
     },
     validateStatus: (response, result) => {
        return response.status === 200 && !result.isError
      },
      transformResponse: (responseData) => {
        const loadedUsers = responseData?.users.map((user) => user)
        console.log("responseData: ", responseData) // <----- return { users: [], totalPage: 100 }. Could we set this totalPage value into Adapter?
        return usersAdapter.setAll(initialState, loadedUsers)
      },
      providesTags: (result, error, arg) => {
        if (result?.ids) {
          return [
            { type: "User", id: "LIST" },
            ...result.ids.map((id) => ({ type: "User", id })),
          ]
        } else return [{ type: "User", id: "LIST" }]
      },
   })
 })

})

Use the hook in component

const { data } = useGetUsersQuery("page=1&limit=10");

console.log(data) // { ids: [], entity: [{}, {}] };
// expected return { ids: [], entity: [{}, {}], totalPage: 100}

Second question:
Store the page query in createSlice. The edit page will be remain same after refresh if the page query value same as initialState value.

import { createSlice } from "@reduxjs/toolkit"

const userReducer = createSlice({
  name: "user",
  initialState: {
    query: `page=1&limit=10`,
  },
  reducers: {
    setUserPageQuery: (state, action) => {
      const query = action.payload
      state.query = query
    },
  },
})

Page url Flow:

  1. localhost:3000/users > localhost:3000/users/4 > refresh -> data will remain after refresh browser. (query “page=1&limit10” same as createSlice initialState value )

  2. localhost:3000/users > localhost:3000/users/15 > refresh -> data state will gone after refresh browser. (query “page=2&limit10″ different from createSlice initialState value )

Appreciate all the reply 🙂

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *