Apollo客户端:错误:网络错误:nextLink.request不是函数

时间:2018-03-13 04:54:38

标签: reactjs graphql apollo-client

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>
);

知道发生了什么事吗?

1 个答案:

答案 0 :(得分:1)

ApolloLink的构造函数的签名如下:

constructor(request?: RequestHandler);

如果要链接多个链接,则需要使用

ApolloLink.from([stateLink, httpLink])

代替。