Alaskan donut Comments

Alaskan donut

•Created by Alaskan donut on 10/14/2024 in #❓-help

Dynamically generate url for httpBatchLink

Currently, this seems to work, however if it's likely that the fallback value would ever be used here as opposed to the return of getUrl()

  const getUrl = () => {
    if (typeof window !== "undefined") {
      const { hostname, protocol, port } = window.location;
      const url = `${protocol}//${hostname}:${port}/api/trpc`;
      return url;
    }
    return undefined;
  };

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: getUrl() ?? "http://localhost:3000/api/trpc",
          // url: "http://192.168.0.16:3000/api/trpc", // For mobile device testing
          // You can pass any HTTP headers you wish here
          // async headers() {
          //   return {};
          // },
          transformer: SuperJSON,
        }),
      ],
    }),
  );

  const getUrl = () => {
    if (typeof window !== "undefined") {
      const { hostname, protocol, port } = window.location;
      const url = `${protocol}//${hostname}:${port}/api/trpc`;
      return url;
    }
    return undefined;
  };

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: getUrl() ?? "http://localhost:3000/api/trpc",
          // url: "http://192.168.0.16:3000/api/trpc", // For mobile device testing
          // You can pass any HTTP headers you wish here
          // async headers() {
          //   return {};
          // },
          transformer: SuperJSON,
        }),
      ],
    }),
  );

3 replies