NextJs Api Routes

[lorenzo-moni]

Hi, I am creating a NextJs GraphQL website using GraphQL Code Generator.
I am using next-urql to implement urql in next and this is my client.

const createUrqlClient = (ssrExchange: Exchange): ClientOptions => ({
  url: "http://localhost:10028/graphql",
  fetchOptions: {
    credentials: "include" as const
  },
  exchanges: [
    dedupExchange,
    cacheExchange({
      keys: {
        HCMSHeader: data => null
      }
    }),
    ssrExchange,
    fetchExchange
  ]
});

Untill now everything is fine but now I am trying to implement a NextJs API Route to implement login functionality.
The problem is that I cannot use hooks generated by GraphQL Code Generator because I'm not into a react component, so I need to do this in the @urql/core way.

The function that I am using to login users is the following (this function will be used into the API ruote)

const loginUser = async ({ username, password }) => {
  const client = createClient(createUrqlClient(null));

  const result = await client
    .mutation(LoginDocument, {
      input: { clientMutationId: v4(), username, password }
    })
    .toPromise();

  console.log(result);
  return result;
};

Right now I am getting the following error

TypeError: r is not a function
    at C:\Users\Lorenzo\Documents\Projects\multigaming\node_modules\@urql\core\dist\urql-core.js:351:14

and I am sure that this is led by the fact that SSRExchange parameter is not getting the right value when being used out of the withUrqlClient() function introduced by @next/urql.

I have also tried to create a separate client this way by not passing the SSRExchange parameter and using it into the loginUser function (const client = createClient(apiUrqlClient);)

export const apiUrqlClient = (): ClientOptions => {
  return {
    url: "http://localhost:10028/graphql",
    fetchOptions: {
      credentials: "include" as const
    },
    exchanges: [
      dedupExchange,
      cacheExchange({
        keys: {
          HCMSHeader: data => null
        }
      }),
      fetchExchange
    ]
  };
};

In this way everything is working but I don't really like writing two createUrqlClient function that are so the same.

My question is: Is it possible to create a single createUrqlClient function that works in both cases (maybe by setting the SSRExchange as optional) ?

Thank You in advance for a possible answer.

[JoviDeCroock]

Let's make a few distinctions here, when you are creating an api-route you mean you are creating a rest-api that uses urql to contact an external server so your front-end calls that lambda through REST and that lambda calls a graphql api? Why are you not calling the auth directly, a lambda is not part of SSR, so using next-urql in an api-route is not intended.

You can instead just call createClient and use everything from @urql/core, if however you are talking about calling a function that uses @urql/core you can pass in your client from the React-component through useClient. Another good option would be to use the authExchange.

Your api-route can look something like this:

import { createClient, fetchExchange } from '@urql/core';

// You don't really want to cache in an API-route.
const client = createClient({ url: 'x', exchanges: [fetchExchange] })

export const handler = async function() {
  const result = await client.mutate().toPromise();
  ....
}