0
199
ViewsAccess the history of responses of a useQuery hook that uses polling
In my app, I need to display the historic state of a server, similar to following image:
The endpoint I use is a normal GET fetch. So I need polling to retrieve the data periodically:
const { data, isFetching, error } = useGetServerStateDataQuery(id, {
pollingInterval: 3000,
})
console.log(data) // data only contains LAST response :(
The problem is that data only contains last response, and I need the historic of all responses to be able to draw the progress. Is there any built-in redux-toolkit solution to access the history of responses?
·
Santiago Trujillo
1 answers
Answer question0
There are multiple approach:
Using extra reducers
You can link a timestamp in the meta
Then plug the result of your endpoint into an extra reducer to keep track of this history of results
const weatherSlice = createSlice({
name: 'weather',
initialState,
reducers: {
history: {}
},
extraReducers: (builder) => {
builder.addCase(api.endpoints.getServerStateDataQuery.fullfilled, (state, action) => {
state.history[action.meta.timestamp] = action.payload
})
},
})
Using entity adapters
You can store each temperature info into an entity object with an entity adapter
const weatherInfoAdapter = createEntityAdapter<Book>({
selectId: (info) => info.id,
sortComparer: (a, b) => a.timestamp.localeCompare(b.timestamp),
})
const weatherSlice = createSlice({
name: 'weather',
initialState: weatherInfoAdapter.getInitialState(),
reducers: {
history: {}
},
extraReducers: (builder) => {
builder.addCase(api.endpoints.getServerStateDataQuery.fullfilled, (state, action) => {
weatherInfoAdapter.addOne(state, action.payload)
})
},
})
·
Santiago Trujillo
Report
Answer question