ill-bronze

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

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

TanStack•2y ago

ill-bronze

Is there a way to have Rewrites or Proxy?

nextjs.config.ts

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

Is there a way to have Rewrites or Proxy?

Similar Threads

Is there a way to have Rewrites or Proxy?

Similar Threads

Similar Threads

Similar Threads