T
TanStack•12mo ago
liable-blush

Is there a way to have Rewrites or Proxy?

Posted this on Github discussions too, but not sure if that's still active. Sorry for the spam! This might be a dumb question, but I couldn't find any docs for it, so I might as well ask. My team is moving away from Nextjs (pages) and moving to TSR (tanstack router with start/vinxi). One of the difficulties we're seeing is that we couldn't find any docs on rewrites/proxies. The reason this is a blocker for us is that we need to have the API set cookies from the same domain as the UI (due to multiple envs, legacy auth issue and others). FWIW, i tried the vite server proxy, but it seems that tanstack router intercepts the request before vite proxy can (assumption). In our nextjs.config.ts we have the following: 
// nextjs.config.ts
{
  rewrites() {
    return [
      { source: "/api/avatar/:path*", destination: `${API_URL}/members/:path*/avatar` },
      { source: "/api/:path*", destination: `${API_URL}/:path*` },
    ];
  },
}
// nextjs.config.ts
{
  rewrites() {
    return [
      { source: "/api/avatar/:path*", destination: `${API_URL}/members/:path*/avatar` },
      { source: "/api/:path*", destination: `${API_URL}/:path*` },
    ];
  },
}
Here's a sample of what we're currently doing. Hopefully there's a better way that this: 
// routes/api/$.ts
// ...

function constructUrl(splat: any) {
  return `${getApiBaseUrl()}/${
    Array.isArray(splat) ? splat.join("/") : typeof splat === "object" ? Object.values(splat).join("/") : splat
  }`;
}

const createResponse = (data: any, headers: Headers, status: number) => 
      new Response(JSON.stringify(data), { headers, status });

export const Route = createAPIFileRoute("/api/$")({
  GET: async ({ params }) => {
    const { _splat } = params;
    const url = constructUrl(_splat);
    const res = await api.get(url);

    return createResponse(res.data, res.headers, res.status);
  },
  POST: async ({ params, request }) => {
    const { _splat } = params;
    const body = await request.json();
    const url = constructUrl(_splat);
    const res = await api.post(url, body);

    return createResponse(res.data, res.headers, res.status);
  },
});
// routes/api/$.ts
// ...

function constructUrl(splat: any) {
  return `${getApiBaseUrl()}/${
    Array.isArray(splat) ? splat.join("/") : typeof splat === "object" ? Object.values(splat).join("/") : splat
  }`;
}

const createResponse = (data: any, headers: Headers, status: number) => 
      new Response(JSON.stringify(data), { headers, status });

export const Route = createAPIFileRoute("/api/$")({
  GET: async ({ params }) => {
    const { _splat } = params;
    const url = constructUrl(_splat);
    const res = await api.get(url);

    return createResponse(res.data, res.headers, res.status);
  },
  POST: async ({ params, request }) => {
    const { _splat } = params;
    const body = await request.json();
    const url = constructUrl(_splat);
    const res = await api.post(url, body);

    return createResponse(res.data, res.headers, res.status);
  },
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?