Question 194072 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search