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

607 Views Asked by At

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.

2

There are 2 best solutions below

0
Paulo Fernando On BEST ANSWER

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>
  );
}
1
onurhan On

When i searching your error, found that. Can you add npm i @urql/core on your project and try again? Hope it's works.