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,
        }),
      ],
    }),
  );