Infinite network request loop when suspense: true

[mrtnbroder]

I've setup urql like described in the docs for next.js 13 (14 now actually).

https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs

where I am using the urql Provider as my method.

Everything works as expected when suspense: false, but as soon as I set it to true (for both server and client therefore) I'm getting stuck into an inf. request loop on the client.

when I set suspense: typeof window !== 'undefined' to only set it to true on the client, everything works.

my question basically is, did I just set the flag incorrectly? is it "correct" to only set it to true on the client? because I dont see it mentioned anywhere in the docs. Or should it be true for both SSR and client? I'm not running into issues atm, but still curious and unexpected!

EDIT: actually after some more playing around i noticed that sometimes urql throws that the hydration didnt match with the server. setting suspense: false now. Anyone got ideas for why I am running into inf. loops here?

EDIT2: Further investigation reveals it's actually related to authExchange. Removing it seems to get around the inf. loop issue.

This is the Provider:

import { cacheExchange } from "@urql/exchange-graphcache"
import {
  UrqlProvider as Provider, createClient, fetchExchange,
  ssrExchange, type Client, type ClientOptions
} from "@urql/next"
import { useMemo, type ReactNode } from "react"

// hide api url on the client, make requests against proxy (setup in middleware.ts)
const GRAPHQL_URI =
  typeof window === "undefined"
    ? new URL(process.env.GRAPHQL_URI!)
    : new URL(process.env.NEXT_PUBLIC_GRAPHQL_URI!, window.location.origin)

export const makeClient = (opts: Omit<ClientOptions, "url">): Client => {
  return createClient({
    url: GRAPHQL_URI.toString(),
    ...opts,
  })
}

export function UrqlProvider({ children }: { children?: ReactNode }) {
  const token = useRef<Session | null>(null)
  const [client, ssr] = useMemo(() => {
    const _ssr = ssrExchange()
    const _cache = cacheExchange()
    const _auth = authExchange(async (utils) => {
      if (token.current === null) token.current = await getToken()

      return {
        didAuthError(error) {
          console.error("didAuthError", error)
          return error.graphQLErrors.some(
            (e) =>
              e.message === "You are not authorized to perform this action.",
          )
        },
        async refreshAuth() {
          console.log("refreshAuth")
          return
        },
        addAuthToOperation(operation) {
          console.log("addAuthToOperation", token)
          if (!token.current) return operation

          return utils.appendHeaders(operation, {
            Authorization: `${token.current.jwt!}`,
          })
        },
      }
    })
    const _client = makeClient({
      exchanges: [_cache, _ssr, _auth, fetchExchange],
      suspense: typeof window === "undefined", // when set to `true`, I run into an infinite loop
    })

    return [_client, _ssr]
  }, [])

  return (
    <Provider client={client} ssr={ssr}>
      {children}
    </Provider>
  )
}