Theo's Typesafe Cult•2y ago

Global data fetching

Using non-app directory Next.js 13 (latest T3), how do you go about fetching data to be consumed globally? Since _app.tsx doesn't allow using getServerSideProps or getStaticProps ?

6 Replies

Neto•2y ago

react query with custom hook

export const useProfile = () => {
  return useQuery({
    queryKey: ["profile"],
    queryFn: async () => {
      const response = await kyClient
        .get(`${env.NEXT_PUBLIC_DAPI}/auth/profile`)
        .json();

      return response as { id: string; name: string; email: string };
    },
  });
};

export const useProfile = () => {
  return useQuery({
    queryKey: ["profile"],
    queryFn: async () => {
      const response = await kyClient
        .get(`${env.NEXT_PUBLIC_DAPI}/auth/profile`)
        .json();

      return response as { id: string; name: string; email: string };
    },
  });
};

so any place that call useProfile will get the same data

riccardolardiOP•2y ago

This makes sense for client-side data fetching but what if I needed the data already on server side to populate the pages / components before getting the response back?

Neto•2y ago

You can use something like get server side props And the whole next props mess

riccardolardiOP•2y ago

You can't use gSSP / gSP in _app.tsx (where one could pass data down to children or store it in global state for everyone to consume)

andersgee•2y ago

for global static data across entire app, one real option is just put it in a .json and import it wherever its needed

cje•2y ago

what do you mean by "consumed globally"?

Gaming

Programming

Global data fetching