T
TanStack•6mo ago
like-gold

Setting/Getting headers does not work?

I've a simple component with a server Fn that will take data and then apply some of that data to the redirect request. 
const serverFn = createServerFn({ method: 'GET' })
    .validator((data: PostMessageData) => data)
    .handler(async (ctx) => {
        throw redirect({
            to: '/screens/hmm',
            headers: { 'X-testing-with': 'tesing' },
            statusCode: 301,
        });
    });

function RouteComponent() {
    const srv = useServerFn(serverFn);
    const data = usePostMessage();

    useEffect(() => {
        if (!data) return;
        srv({ data });
    }, [data]);

    return <div>Hello "/screens/"!</div>;
}
const serverFn = createServerFn({ method: 'GET' })
    .validator((data: PostMessageData) => data)
    .handler(async (ctx) => {
        throw redirect({
            to: '/screens/hmm',
            headers: { 'X-testing-with': 'tesing' },
            statusCode: 301,
        });
    });

function RouteComponent() {
    const srv = useServerFn(serverFn);
    const data = usePostMessage();

    useEffect(() => {
        if (!data) return;
        srv({ data });
    }, [data]);

    return <div>Hello "/screens/"!</div>;
}
Then I retrieve the headers from within the server Fn on the redirected page: 
export const Route = createFileRoute('/screens/hmm')({
    loader(ctx) {
        serverFn();
    },
    component: RouteComponent,
});

const serverFn = createServerFn().handler(async (ctx) => {
    const headers = getHeaders();
    console.log(headers);
});
export const Route = createFileRoute('/screens/hmm')({
    loader(ctx) {
        serverFn();
    },
    component: RouteComponent,
});

const serverFn = createServerFn().handler(async (ctx) => {
    const headers = getHeaders();
    console.log(headers);
});
But no headers appear when I try get them, Am I misunderstanding the purpose of the redirect?
5 Replies
fascinating-indigo
fascinating-indigo•6mo ago
adding a header to a redirect will only influence the response not the next request
like-gold
like-goldOP•6mo ago
I think I understand what you are saying, is this the case that I need to create middleware or is there a smarter way to share context between pages? Just for context, the app is hosted in an iframe that uses postMessage to pass down authentication hence I was hoping that I could redirect the user to the correct page based on an id in data object and then do API fetch using that token.
fascinating-indigo
fascinating-indigo•6mo ago
I need some more context here. please explain in detail
like-gold
like-goldOP•6mo ago
I have a tablet app wrapped in CapacitorJS that renders a simple SPA application using React. This is level 0, which handles authentication and retrieves a specific template ID for that tablet from the database. Once authentication is passed and we've fetched screen information (such as location, template ID, etc.), we render an iframe with the src pointing to the Tanstack server, which is level 1. In order to safely pass the token to the iframe, we use postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). On the SPA side, we're sending a postMessage with the authentication data. On the SSR side, we're rendering the initial HTML with a listener for the "postMessage" event. We validate the origin and the data, then use a server function to send it to the server. This allows us to select the correct template, redirect to it, and pass the data down through context or headers. Along with throwing errors if the token is invalid and doing other server side checks with regards to template id, we then also use the token to fetch data obviously inside of the template using loader function, but have not gotten to that yet since I am stuck on actually passing data to the template from the initial page. The reason for handling the authentication from the SPA btw is because its a react app wrapped inside of a native app and so the authentication flows are different to what they are on the browser vs webskit inside a native app. In the end, we get some nice flexibily about what screen shows what template at any time hence this somewhat convoluted flow. okay, getting somewhere now, I think I can use setCookie and getCookie for this use case Yup, works like a charm. I am able to fetch data and pass the required token. Ty for rubber ducking!
fascinating-indigo
fascinating-indigo•6mo ago
glad to be of service 😁

Did you find this page helpful?