T
TanStack•3y ago
wise-white

Using prefetch query in getserversideprops (next.js) fails when deploying on Vercel

Hi everyone, my code in running in local but when I deploy it on Vercel it fails - I prefetch the async moralis code with react query in getserversideprops - I retrieve it and console.log shows undefined when I deploy this code, but one more time everythings works fine locally when I run pnpm dev what I'm doing wrong ? Is this even the right way to do this ? I've settled my key in vercel see img joined, I've tried both with and without quotations marks 
const chain = EvmChain.GOERLI;

async function getOwners() {
  await Moralis.start({ apiKey: process.env.NEXT_PUBLIC_MORALIS_API_KEY });
  const response = await Moralis.EvmApi.nft.getNFTOwners({
    address: GLIMMERS_GOERLI_ADDRESS,
    chain,
  });
  const responseJson = JSON.stringify(response);
  return responseJson;
}

const queryClient = new QueryClient();
const STALE_TIME = 10000;

export async function getServerSideProps(context) {
  await queryClient.prefetchQuery(["getOwners"], getOwners, {
    staleTime: STALE_TIME,
  });
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function Dashboard() {
  const { data: rawOwners } = useQuery(["getOwners"], getOwners, {
    staleTime: STALE_TIME,
  });
  console.log(rawOwners);     // <- this returns undefined ONLY on vercel
const chain = EvmChain.GOERLI;

async function getOwners() {
  await Moralis.start({ apiKey: process.env.NEXT_PUBLIC_MORALIS_API_KEY });
  const response = await Moralis.EvmApi.nft.getNFTOwners({
    address: GLIMMERS_GOERLI_ADDRESS,
    chain,
  });
  const responseJson = JSON.stringify(response);
  return responseJson;
}

const queryClient = new QueryClient();
const STALE_TIME = 10000;

export async function getServerSideProps(context) {
  await queryClient.prefetchQuery(["getOwners"], getOwners, {
    staleTime: STALE_TIME,
  });
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function Dashboard() {
  const { data: rawOwners } = useQuery(["getOwners"], getOwners, {
    staleTime: STALE_TIME,
  });
  console.log(rawOwners);     // <- this returns undefined ONLY on vercel
No description
2 Replies
conscious-sapphire
conscious-sapphire•3y ago
Do you get any kind of error-message if you check the network tab on your site deployed to vercel? Does it work if you build the project locally and run it (I mean build as building the project like you do in production, not running the dev-server)?
wise-white
wise-whiteOP•3y ago
It resolved and I don't even know why it works now :/ I suspect maybe a variable environment issue or a rebuild needed on vercel to take the renewed env var to be used. Thx for your support 🙂

Did you find this page helpful?