Homarr/packages/api/src/shared.ts

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

/**
 * Creates a headers callback for a given source
 * It will set the x-trpc-source header and cookies if needed
 * @param source trpc source request comes from
 * @returns headers callback
 */
export function createHeadersCallbackForSource(source: string) {
  return async () => {
    const headers = new Headers();
    headers.set("x-trpc-source", source);

    const cookies = await importCookiesAsync();
    // We need to set cookie for ssr requests (for example with useSuspenseQuery or middleware)
    if (cookies) {
      headers.set("cookie", cookies);
    }

    return headers;
  };
}

/**
 * This is a workarround as cookies are not passed to the server
 * when using useSuspenseQuery or middleware
 * @returns cookie string on server or null on client
 */
async function importCookiesAsync() {
  if (typeof window !== "undefined") {
    return null;
  }

  const { cookies } = await import("next/headers");

  return (await cookies())
    .getAll()
    .map(({ name, value }) => `${name}=${value}`)
    .join(";");
}

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  return `http://${process.env.HOSTNAME ?? "localhost"}:3000`;
}

export const trpcPath = "/api/trpc";

/**
 * Creates the full url for the trpc api endpoint
 * @returns
 */
export function getTrpcUrl() {
  return `${getBaseUrl()}${trpcPath}`;
}

export const makeQueryClient = () => {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 5 * 1000,
      },
      dehydrate: {
        shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === "pending",
      },
    },
  });
};