TypeError: Cannot read properties of undefined (reading 'reduceRight') when using urql client in Next.js

Question

I'm encountering an issue with the reduceRight error when I'm trying to use the urql GraphQL client in my Next.js application. The error message points to the client.js file, specifically client.js:1:4803(this is inside node_modules). However, I'm unable to determine the exact cause of the problem.

screenshot of the error

Here's the whole code from the _app.js file:

import '@/styles/globals.css';
import { Provider, createClient } from "urql";

const client = createClient({ url: "http://localhost:1337/graphql" });

function MyApp({ Component, pageProps }) {
  return (
    <Provider value={client}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

These are the dependencies that I use:

dependencies": {
        "eslint-config-next": "^12.0.4",
        "fast-json-stable-stringify": "^2.1.0",
        "graphql": "^16.7.1",
        "graphql-tag": "^2.12.6",
        "next": "13.4.7",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "ts-invariant": "^0.10.3",
        "urql": "^4.0.4",
        "zen-observable": "^0.10.0"
      }

I have already verified that the necessary dependencies (urql, graphql, zen-observable) are installed and up to date.The GraphQL server is running and accessible at http://localhost:1337/graphql.

Thank you in advance for your help.

Answer 1

In the current version (v4) you need to pass the exchanges:

https://github.com/urql-graphql/urql/issues/3114#user-content-tsdocs-tsdocs-everywhere-

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

const client = createClient({
  url: 'http://localhost:1337/graphql',
  exchanges: [cacheExchange, fetchExchange],
})

function MyApp({ Component, pageProps }) {
  return (
    <Provider value={client}>
      <Component {...pageProps} />
    </Provider>
  );
}