Theo's Typesafe Cult•3y ago

React Query + Next 13 + Vercel?

Has anyone been able to deploy a site with RQ and Next 13 to Vercel? I am able to use RQ locally, both in dev and build, but when deploying to vercel, the page would return error 500. Not sure what could be the cause for me...

5 Replies

cornflourOP•3y ago

Here are the relevant code pieces:

// /app/client-fetch/layout.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";

const queryClient = new QueryClient();

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

// /app/client-fetch/layout.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";

const queryClient = new QueryClient();

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

// /app/client-fetch/page.tsx
import { RQFetch } from "../../components/client-rq";

const ClientFetch = () => {
  return (
    <main>
      <h1 className="text-4xl font-bold">Fetch with RQ</h1>
      <RQFetch />
    </main>
  );
};

export default ClientFetch;

// /app/client-fetch/page.tsx
import { RQFetch } from "../../components/client-rq";

const ClientFetch = () => {
  return (
    <main>
      <h1 className="text-4xl font-bold">Fetch with RQ</h1>
      <RQFetch />
    </main>
  );
};

export default ClientFetch;

// /components/client-rq
"use client";

import { useQuery } from "@tanstack/react-query";
import { getBaseUrl } from "../utils/get-base-url";

const fetchData = async () =>
  fetch(`${getBaseUrl()}/api/hello`).then((res) => res.json());

export const RQFetch = () => {
  console.log(`test RQ: ${getBaseUrl()}/api/hello`);
  const { data } = useQuery(["fetchdata"], fetchData);

  if (!data) return <div>RQ loading...</div>;

  return (
    <p>
      React Query response:{" "}
      <span className="text-red-600 font-semibold">{data.name}</span>
    </p>
  );
};

// /components/client-rq
"use client";

import { useQuery } from "@tanstack/react-query";
import { getBaseUrl } from "../utils/get-base-url";

const fetchData = async () =>
  fetch(`${getBaseUrl()}/api/hello`).then((res) => res.json());

export const RQFetch = () => {
  console.log(`test RQ: ${getBaseUrl()}/api/hello`);
  const { data } = useQuery(["fetchdata"], fetchData);

  if (!data) return <div>RQ loading...</div>;

  return (
    <p>
      React Query response:{" "}
      <span className="text-red-600 font-semibold">{data.name}</span>
    </p>
  );
};

// /utils/get-base-url
export const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

// /utils/get-base-url
export const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

cornflourOP•3y ago

here's the error message

cornflourOP•3y ago

The console.log() there can be found in the vercel function logs for /client-fetch with the actual full url, but not on the client side

cornflourOP•3y ago

wait this may have been the issue...

cornflourOP•3y ago

Gaming

Programming

React Query + Next 13 + Vercel?

Did you find this page helpful?