Proper way of using multiple SWR hooks with same initialData

[vladfulgeanu]

Let's say I have a main component that uses SSR and then passes that data to useSWR's initialData

interface OwnProps {
  id: number;
  dataFromServer?: any;
}

const MainPage: NextPage<OwnProps> = ({ id, dataFromServer }) => {
  if (!dataFromServer) return <ErrorPage />;

  const { data, error } = useSWR(id, fetcher,
    {
      initialData: dataFromServer,
    },
  );
  if (error) return <div>Error</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <>
      <Meta tags here />
      <ChildPage
        id={id}
        dataFromServer={dataFromServer}
      />
    </>
  );
};

export const getServerSideProps = async ({ params }) => {
    if (!params) return { props: {} };
    const id = parseInt(params.id as string, 10);

    const response = await fetchData(id);

    return {
      props: {
        id,
        dataFromServer: response,
      },
    };
  }

What happens if dataFromServer is very complex and needs to be used in many other child components down the tree, how should initialData be initialized to those useSWRs as well? Given that initialData is per hook, they will have a split second of loading state and the advantage of using initialData is nulled. Is passing dataFromServer through props a good practice?
Should a react reducer/state be used in this case to store dataFromServer and passed around with contexts?

Basically how should useSWR along with SSR or SSG be used when having complex data structures without resorting to somehting like redux?
How can the initialData from the server be used across all components that need it and also have changes (mutation) of data visible everywhere?

[yaromyrshmid]

@vladfulgeanu, did you manage to resolve this? Could you please share your solution?

[AryanJ-NYC]

@vladfulgeanu, great question. I'm also trying to figure this out. Any luck?

[IHIutch]

Just asked a similar question, been wondering this myself. Only year later and I still can't find an answer 😅

[shuding]

https://swr.vercel.app/docs/advanced/cache will be the recommended way in the future (we will add more examples soon), please try it out!

[IHIutch]

Awesome, thanks. I'll take a look!