英文:
TypeError: Cannot read properties of undefined (reading 'reduceRight') when using urql client in Next.js
问题
我在尝试在我的Next.js应用程序中使用urql GraphQL客户端时遇到了reduceRight错误的问题。错误消息指向了client.js文件，具体来说是client.js:1:4803（这在node_modules中）。然而，我无法确定问题的确切原因。
以下是_app.js文件的完整代码：
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;
这些是我使用的依赖项：
"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"
}
我已经验证了必要的依赖项（urql、graphql、zen-observable）已安装并且已经是最新版本。GraphQL服务器正在运行，可以通过http://localhost:1337/graphql访问。
提前感谢您的帮助。
英文:
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.
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.
答案1
得分: 3
在当前版本（v4）中，您需要传递以下交换：
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>
);
}
英文:
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>
);
}
答案2
得分: 0
当我搜索您的错误时，发现了这个。您能在您的项目中添加npm i @urql/core并再次尝试吗？希望它能工作。
英文:
When i searching your error, found that. Can you add npm i @urql/core on your project and try again? Hope it's works.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论