index.js:2177 Unhandled (in react-apollo:Apollo(App)) Error: Network error: nextLink.request is not a function
at new ApolloError (http://localhost:8000/commons.js:1946:29)
at ObservableQuery../node_modules/apollo-client/bundle.umd.js.ObservableQuery.currentResult (http://localhost:8000/commons.js:2048:25)
at ProxyComponent.GraphQL.dataForChild (http://localhost:8000/commons.js:68056:63)
at ProxyComponent.dataForChild (http://localhost:8000/commons.js:94845:31)
at ProxyComponent.GraphQL.render (http://localhost:8000/commons.js:68106:34)
at ProxyComponent.render (http://localhost:8000/commons.js:94845:31)
at http://localhost:8000/commons.js:73619:22
at measureLifeCyclePerf (http://localhost:8000/commons.js:72899:13)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:8000/commons.js:73618:26)
at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:8000/commons.js:73645:33)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8000/commons.js:73569:37)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:8000/commons.js:73547:11)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:8000/commons.js:73468:13)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:8000/commons.js:73384:13)
at Object.performUpdateIfNecessary (http://localhost:8000/commons.js:79624:23)
at runBatchedUpdates (http://localhost:8000/commons.js:80351:22)
at ReactReconcileTransaction.perform (http://localhost:8000/commons.js:82222:21)
at ReactUpdatesFlushTransaction.perform (http://localhost:8000/commons.js:82222:21)
at ReactUpdatesFlushTransaction.perform (http://localhost:8000/commons.js:80290:33)
at Object.flushBatchedUpdates (http://localhost:8000/commons.js:80373:20)
at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:8000/commons.js:82288:26)
at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:8000/commons.js:82235:17)
at Object.batchedUpdates (http://localhost:8000/commons.js:77217:27)
at Object.enqueueUpdate (http://localhost:8000/commons.js:80401:23)
at enqueueUpdate (http://localhost:8000/commons.js:79988:17)
at Object.enqueueForceUpdate (http://localhost:8000/commons.js:80120:6)
at ProxyComponent../node_modules/react/lib/ReactBaseClasses.js.ReactComponent.forceUpdate (http://localhost:8000/commons.js:100002:17)
at ProxyComponent.GraphQL.forceRenderChildren (http://localhost:8000/commons.js:68024:27)
at ProxyComponent.forceRenderChildren (http://localhost:8000/commons.js:94845:31)
at next (http://localhost:8000/commons.js:67999:28)
at Object.handleError [as error] (http://localhost:8000/commons.js:68003:33)
at SubscriptionObserver.error (http://localhost:8000/commons.js:105336:21)
at http://localhost:8000/commons.js:2287:83
at Array.forEach (<anonymous>)
at Object.error (http://localhost:8000/commons.js:2287:34)
at http://localhost:8000/commons.js:2829:39
at http://localhost:8000/commons.js:3203:18
at Array.forEach (<anonymous>)
at http://localhost:8000/commons.js:3202:19
at Map.forEach (<anonymous>)
at QueryManager../node_modules/apollo-client/bundle.umd.js.QueryManager.broadcastQueries (http://localhost:8000/commons.js:3197:23)
at http://localhost:8000/commons.js:2771:32
at <anonymous>
我正在尝试将apollo-link-state
集成到我的应用中,当我尝试运行遇到外部端点和缓存的查询时,我收到错误...
这是查询和HOC:
// the graphql query to get the user
const userQuery = gql`
query UserQuery {
getUser(id: 1) {
givenName
avatarUrl
account {
credit
}
}
user @client {
name
}
}
`;
// mapping the results to the props
const mapResultsToProps = ({ data }) => {
console.log(data);
if (!data.getUser) {
return {
name: ''
};
}
console.log('hit');
console.log(data);
return {
name: data.getUser.givenName
};
};
export default graphql(userQuery, { props: mapResultsToProps })(App);
以下是我如何设置一切:
const cache = new InMemoryCache();
const stateLink = withClientState({
cache,
resolvers: {
Mutation: {
setUser: (_, { name }, { cache }) => {
const data = {
user: {
__typename: 'UserName',
name
}
};
cache.writeData({ data });
}
}
},
defaults: {
user: {
__typename: 'UserName',
name: 'name in local cache'
}
}
});
const httpLink = new HttpLink({
uri: urls.graphqlServer + urls.graphqlEndpoint,
credentials: 'same-origin',
headers: {
authorization: getCookie('Authorization')
}
});
const client = new ApolloClient({
cache,
link: new ApolloLink([stateLink, httpLink]),
connectToDevTools: true
});
window.__APOLLO_CLIENT__ = client;
return (
<ApolloProvider client={client}>
<Root />
</ApolloProvider>
);
知道发生了什么事吗?
答案 0 :(得分:1)
ApolloLink
的构造函数的签名如下:
constructor(request?: RequestHandler);
如果要链接多个链接,则需要使用
ApolloLink.from([stateLink, httpLink])
代替。