kingvamp
kingvamp

Reputation: 33

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

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.

Upvotes: 3

Views: 1073

Answers (2)

Paulo Fernando
Paulo Fernando

Reputation: 3660

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>
  );
}

Upvotes: 8

onurhan
onurhan

Reputation: 117

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

Upvotes: 0

Related Questions