I've been looking into this for over 2 hrs now. Is it possible to set custom headers after a query is successfull ?

[Dax911]

I've been looking into this for over 2 hrs now. Is it possible to set custom headers after a query is successfull ?

// mutation
  .mutation('login', {
    input: z.object({
      email: z.string().email(),
      password: z.string(),
    }),
    async resolve({ ctx, input: { email, password } }) {
      const account = await ctx.prisma.account.findFirst({ where: { email } });

      if (!account)
        throw new TRPCError({
          code: 'NOT_FOUND',
          message: 'Account doeesn"t exist with the provided email',
        });

      const isSamePassword = await comparePassword(password, account.password);

      if (!isSamePassword)
        throw new TRPCError({
          code: 'BAD_REQUEST',
          message: 'Invalid email or password',
        });

      const { accessToken, refreshToken } = createTokens(`${account.id}`);

      ctx.res.setHeader('Set-Cookie', refreshToken);

      return {
        ...account,
        accessToken,
      };
    },
  });

// mutation client
  const loginMut = trpc.useMutation(['auth.login'], {
    onSuccess() {
      // set header here
    },
  });

as you can see I'm setting the refresh-token cookie and sending the accessToken. I want to set the accessToken header on the client after the login mutation is successful. I've looked into the docs of trpc and react-query but failed to find the solution. I'm new to trpc but love the concept and DX. Can anybody help ?

Originally posted by @soulsam480 in #1408

So same/similar question but want to enable headers because I keep getting Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. I know the reasons not to do this but I am querying assets from the blockchain so unless I add them to my own managed S3 bucket I can't get them all under the same domain.

import "../styles/global.css";
import type { AppProps } from "next/app";
import { defaultChains, WagmiProvider } from 'wagmi'
import { InjectedConnector } from "wagmi/connectors/injected";

const connector = new InjectedConnector({
  chains: [...defaultChains],
})



function MyApp({ Component, pageProps }: AppProps) {
  return (
      <WagmiProvider autoConnect connectors={[connector]}>
      <Component {...pageProps} />
      </WagmiProvider>
  );
}

import { withTRPC } from "@trpc/next";
import type { AppRouter } from "@/backend/router";
//remember to add wagmi wrapper

export default withTRPC<AppRouter>({
  config({ ctx }) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @link https://trpc.io/docs/ssr
     */
    const url = process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}/api/trpc`
      : "http://localhost:3000/api/trpc";

    return {
    
      url,
      /**
       * @link https://react-query.tanstack.com/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   */
  ssr: false,
})(MyApp);

[KATT]

Doesn't @timcole answer this here?

#1408 (comment)