Integrate next-redux-wrapper with redux-toolkit and RTK query

Question

i made a looong research and i cant make a successful integration with next-redux-wrapper, redux-toolkit and rtk query.

i want to call getServerSideProps in the next component to load the userData, the thing is that i actually cant make something successful

    const ToDoComponent = dynamic(() => import("../components/ToDoComponent"), {
  loading: () => <NextNProgress />,
})

const ToDo = () => {
  const username = useSelector((state) => state.useReducer.username)
  const { isMobileState } = useIsMobile()
  //const { data: darkmode} = useGetUserDarkModeQuery(username) /* i want to make those two calls before showing the todoComponent */
  //useGetUserListsQuery(username) /* this one tho */
  //wanna make those tho queries on getServerSideProps func
  setNextTheme(darkmode)
  useRedirect()

  return (
    <>
      <ToDoComponent isMobileState={isMobileState} darkmode={darkmode} />
    </>
  )
}


export async function getServerSideProps() {
  store.dispatch(listsApi.endpoints.getUserLists.initiate("hardcoded username"))
     //this doesnt work, store is not defined, i try using wrappedStore but the actuall func has an error
}

Answer 1

To access the store in getServerSideProps, you have to wrap that function like shown in the next-redux-wrapper docs:

export const getServerSideProps = wrapper.getServerSideProps(store => ({req, res, ...etc}) => {
  store.dispatch(listsApi.endpoints.getUserLists.initiate("hardcoded username"))
  await Promise.all(dispatch(listsApi.util.getRunningQueriesThunk()))
});