3

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 Answers 2

7

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

1
  • Didn't seem to fix it, but thank you!
    – kingvamp
    Commented Jun 25, 2023 at 22:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.