Handling query params with Mobx 6 and Nextjs

[ArshadRao]

I have a similar implementation of mobx with next js:

_app.tsx

export default function App({ Component, pageProps }) {
  return (
    <StoreProvider {...pageProps}>
      <Component {...pageProps} />
    </StoreProvider>
  );
}

StoreProvider.tsx

function initializeStore(initialData = null) {
  const _store = store ?? new Store();

  // If your page has Next.js data fetching methods that use a Mobx store, it will
  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
  if (initialData) {
    _store.hydrate(initialData);
  }
  // For SSG and SSR always create a new store
  if (typeof window === "undefined") return _store;
  // Create the store once in the client
  if (!store) store = _store;

  return _store;
}

export function StoreProvider({ children, initialState: initialData }) {
  const store = initializeStore(initialData);

  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
}

store.ts

enableStaticRendering(typeof window === "undefined");

export class Store {
  lastUpdate = 0;
  apiResponse = "";

  constructor() {
    makeObservable(this, {
      lastUpdate: observable,
      apiResponse: observable,
      hydrate: action,
      setAPIResponse: action,
    });
  }

  hydrate = (data) => {
    if (!data) return;
    this.apiResponse = data.apiResponse;
  };

  setAPIResponse = (response) => {
    this.apiResponse = response;
  };
}

ssr.tsx // page

import Page from "../components/Page";

export default function SSR() {
  return <Page title="Index Page" linkTo="/other" />;
}

// The date returned here will be different for every request that hits the page,
// that is because the page becomes a serverless function instead of being statically
// exported when you use `getServerSideProps` or `getInitialProps`
export function getServerSideProps() {
  return {
    props: {
      initialState: {
        lastUpdate: Date.now(),
        apiResponse: "Hello from the server", // api call response
      }
    }
  };
}

Page Component

const Page = observer(function Page(props) {
  // use store from the store context
  const store = useStore();
  const router = useRouter();

  const fetchAPIData = () => {
    store.setAPIResponse("Hello from the client");
    router.push(
      {
        pathname: router.pathname,
        query: { ...router.query, client: true },
      },
      undefined,
      { shallow: true } // Prevents full page reload
    );
  };

  return (
    <div>
      <h1>{props.title}</h1>
      <h2>{store.apiResponse}</h2>
      <Clock />
      <button onClick={fetchAPIData}>
        Fetch more api data
      </button>
      <nav>
        <Link href={props.linkTo}>Navigate</Link>
      </nav>
    </div>
  );
});

I am making an API call in getServerSideProps in ssr page which hydrates the store with initial data.
I have a use case where i have to update the api data in client based on user interaction sort of like a filter.
I make an api call on button interaction and update the store with updated data.

Problem:
The problem arises when i integrate query params to store the filters.
As soon as i update the query params with router push shallow true.
The _app.js re-renders with the stale data from server and updates the store with stale data.

What should happen:
When we update query params.
The store should not be updated with the initial data from server which overrides the updated data.

My main use case is pagination and filtering of data and i want to keep the state of filters and page in query params.

[MILLERMARRU]

I checked, and your StoreProvider.tsx is a verbatim copy of the official Next.js with-mobx example (examples/with-mobx/components/StoreProvider.js in the vercel/next.js repo) — which means the bug is actually in the example itself, not something you introduced.

export function StoreProvider({ children, initialState: initialData }) {
  const store = initializeStore(initialData);
  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
}

initializeStore(initialData) is called directly in the render body, unmemoized. router.push(..., { shallow: true }) still triggers a re-render of _app with the same pageProps.initialState reference from the original getServerSideProps call (shallow routing only skips re-running data-fetching methods, it doesn't skip the React re-render). So every time your query-param update causes _app to re-render, StoreProvider re-runs, initializeStore runs again, and since initialData is truthy, _store.hydrate(initialData) fires again — overwriting whatever you'd just set client-side (setAPIResponse, filters, etc.) with the original server snapshot.

The fix is to memoize so initializeStore/hydrate only ever runs once, on mount:

import { useState } from "react";

export function StoreProvider({ children, initialState: initialData }) {
  const [store] = useState(() => initializeStore(initialData));
  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
}

useState's lazy initializer only runs the function once, on the component's first render — subsequent re-renders (from your shallow query-param pushes) just reuse the same store instance and skip hydrate entirely, so your client-side updates to filters/pagination state stick.

[mweststrate]

@MILLERMARRU thanks for the detailed answer! would you be interested in opening a PR to the repo to updating the next example accordingly?