Saleor App Template Error (t is not a function)

[mrdavila]

When trying to use the current saleor-app-template to build a custom app, I was constantly getting:

---

Error Message

t is not a function
at createClient (src/lib/create-graphq-client.ts:14:19)
at GraphQLProvider (src/providers/GraphQLProvider.tsx:18:30)

Code Frame

12 |
13 | export const createClient = (url: string, getAuth: AuthConfig["getAuth"]) =>

14 | urqlCreateClient({
| ^
15 | url,
16 | exchanges: [
17 | dedupExchange,

---

The last thing I did that fixed this issue was to just remove "dedupExchange" entirely from src/lib/create-graphq-client.ts

My final working code pinned below. I'm not sure if this change alone was what fixed the problem (because there were other things I tried along the way), but this was the last thing that made it work again.

---

import { AuthConfig, authExchange } from "@urql/exchange-auth";
import { createClient as urqlCreateClient, cacheExchange, fetchExchange } from "@urql/core";

interface IAuthState {
  token: string;
}

console.log("URQL imports:", {
  cacheExchange,
  fetchExchange,
  authExchange,
});

export const createClient = (
  url: string,
  getAuth: AuthConfig<IAuthState>["getAuth"]
) =>
  urqlCreateClient({
    url,
    exchanges: [
      cacheExchange,
      authExchange<IAuthState>({
        addAuthToOperation: ({ authState, operation }) => {
          if (!authState?.token) return operation;

          const fetchOptions =
            typeof operation.context.fetchOptions === "function"
              ? operation.context.fetchOptions()
              : operation.context.fetchOptions || {};

          return {
            ...operation,
            context: {
              ...operation.context,
              fetchOptions: {
                ...fetchOptions,
                headers: {
                  ...fetchOptions.headers,
                  Authorization: `Bearer ${authState.token}`,
                },
              },
            },
          };
        },
        getAuth,
      }),
      fetchExchange,
    ],
  });

---