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.