我正在使用React,Apollo和Next.js构建一个项目。我试图将react-apollo更新到3.1.3,现在查看网站时出现以下错误。
不变违背:在上下文中找不到或作为选项传入的“client”。请将根组件 Package 在中,或通过选项传入ApolloClient示例。
如果我把react-apollo软件包降级到2.5.8,它可以正常工作,所以我想在2.5和3.x之间有什么变化,但在react-apollo或next-with-apollo文档中找不到任何东西来说明可能是什么。
withData.js
import withApollo from 'next-with-apollo';
import ApolloClient from 'apollo-boost';
import { endpoint } from '../config';
function createClient({ headers }) {
return new ApolloClient({
uri: endpoint,
request: operation => {
operation.setContext({
fetchOptions: {
credentials: 'include'
},
headers
});
},
// local data
clientState: {
resolvers: {
Mutation: {}
},
defaults: {}
}
});
}
export default withApollo(createClient);
_app.js
import App from 'next/app';
import { ApolloProvider } from 'react-apollo';
import Page from '../components/Page';
import { Overlay } from '../components/styles/Overlay';
import withData from '../lib/withData';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
<ApolloProvider client={apollo}>
<Overlay id="page-overlay" />
<Page>
<Component {...pageProps} />
</Page>
</ApolloProvider>
);
}
}
export default withData(MyApp);
7条答案
按热度按时间w8ntj3qf1#
在我的例子中,我发现我安装了
react-apollo@3.0.1
和@apollo/react-hooks@3.0.0
。删除@apollo/react-hooks
并仅依赖react-apollo
为我修复了不变的问题。请确保您没有在锁定文件或package.json
中使用任何不匹配的版本这是有人在GitHub的issue thread中说的,我也是这样。一定要试试!
i1icjdpr2#
我有一个混合的解决方案,我认为它确实归结为你最初如何去设置所有相关的软件包。
“当涉及到将客户端连接到React
Context.Provider
时,一些包不能与其他包很好地工作”我有两个去两个修复,似乎工作得很好(与新项目和更新旧):
1:卸载
@apollo/react-hooks
然后:
而不是:
(This允许我保留“@apollo/react-hooks”包而不发生冲突)
3:仔细检查为
HttpLink
客户端URI
提供服务的服务器是否已启动并正在运行,以便客户端连接(这给予了一个不同的错误,但在这种情况下仍然很好)**结论:**这可能需要一些反复试验,但请尝试使用匹配/配对软件包
8i9zcol23#
我卸载了'react-apollo',使用了'@apollo/client',它为我解决了这个问题。
lg40wkob4#
这些导入对我来说非常有效。我花了很长时间调试和找到不同的导入库,但最终在3个小时后,这是使用GraphQL和Appolo的解决方案。
nvbavucw5#
我发现这也是解决方案,尽管现在我只使用
@apollo/client
和apollo-link
,因为它们是最新版本。kjthegm66#
从'apollo/client'导入{ApolloProvider},而不是'react-apollo'或'@apollo/react-hooks'
wlp8pajw7#
我遇到了同样的问题,以下为我解决了这个问题: