search

mbrochh / django-graphql-apollo-react-demo

Code for a workshop about my Django, GraphQL, ReactJS, Apollo-stack
332 stars 78 forks source link

batchedNetworkInterface.js (Method Not Allowed) #8

Open voyageanp opened 7 years ago

voyageanp commented 7 years ago

after adding a list view of react Add Apollo to React I have got this error Does somebody know how can I resolve this?

proxyConsole.js:56 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (at App.js:39)
    in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:56
printWarning @ warning.js:35
warning @ warning.js:59
checkReactTypeSpec @ checkReactTypeSpec.js:80
validatePropTypes @ ReactElementValidator.js:162
createElement @ ReactElementValidator.js:216
render @ App.js:39
(anonymous) @ ReactCompositeComponent.js:795
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794
_renderValidatedComponent @ ReactCompositeComponent.js:821
performInitialMount @ ReactCompositeComponent.js:361
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:143
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap ed6c791c4441b7b6a244:669
fn @ bootstrap ed6c791c4441b7b6a244:87
0 @ ListView.js:34
__webpack_require__ @ bootstrap ed6c791c4441b7b6a244:669
(anonymous) @ bootstrap ed6c791c4441b7b6a244:715
(anonymous) @ bundle.js:719
2batchedNetworkInterface.js:174 OPTIONS http://localhost:8000/gql 405 (Method Not Allowed)
./node_modules/apollo-client/transport/batchedNetworkInterface.js.HTTPBatchedNetworkInterface.batchedFetchFromRemoteEndpoint @ batchedNetworkInterface.js:174
(anonymous) @ batchedNetworkInterface.js:59
Promise resolved (async)
(anonymous) @ batchedNetworkInterface.js:54
./node_modules/apollo-client/transport/batchedNetworkInterface.js.HTTPBatchedNetworkInterface.batchQuery @ batchedNetworkInterface.js:52
./node_modules/apollo-client/transport/batching.js.QueryBatcher.consumeQueue @ batching.js:38
(anonymous) @ batching.js:56
setTimeout (async)
./node_modules/apollo-client/transport/batching.js.QueryBatcher.scheduleQueueConsumption @ batching.js:54
./node_modules/apollo-client/transport/batching.js.QueryBatcher.enqueueRequest @ batching.js:20
./node_modules/apollo-client/transport/batchedNetworkInterface.js.HTTPBatchedNetworkInterface.query @ batchedNetworkInterface.js:43
./node_modules/apollo-client/transport/Deduplicator.js.Deduplicator.query @ Deduplicator.js:15
(anonymous) @ QueryManager.js:727
./node_modules/apollo-client/core/QueryManager.js.QueryManager.fetchRequest @ QueryManager.js:724
./node_modules/apollo-client/core/QueryManager.js.QueryManager.fetchQuery @ QueryManager.js:259
./node_modules/apollo-client/core/QueryManager.js.QueryManager.startQuery @ QueryManager.js:567
./node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.setUpQuery @ ObservableQuery.js:330
./node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.onSubscribe @ ObservableQuery.js:281
subscriberFunction @ ObservableQuery.js:35
./node_modules/apollo-client/util/Observable.js.Observable.subscribe @ Observable.js:13
GraphQL.subscribeToQuery @ react-apollo.browser.umd.js:499
GraphQL.componentDidMount @ react-apollo.browser.umd.js:288
(anonymous) @ ReactCompositeComponent.js:264
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:263
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap ed6c791c4441b7b6a244:669
fn @ bootstrap ed6c791c4441b7b6a244:87
0 @ ListView.js:34
__webpack_require__ @ bootstrap ed6c791c4441b7b6a244:669
(anonymous) @ bootstrap ed6c791c4441b7b6a244:715
(anonymous) @ bundle.js:719
localhost/:1 Fetch API cannot load http://localhost:8000/gql. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
proxyConsole.js:56 Unhandled (in react-apollo) Error: Network error: Failed to fetch
    at new ApolloError (http://localhost:3000/static/js/bundle.js:4268:28)
    at ObservableQuery../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.currentResult (http://localhost:3000/static/js/bundle.js:1852:25)
    at GraphQL.dataForChild (http://localhost:3000/static/js/bundle.js:21194:62)
    at GraphQL.render (http://localhost:3000/static/js/bundle.js:21237:33)
    at http://localhost:3000/static/js/bundle.js:27438:21
    at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:26718:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/static/js/bundle.js:27437:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/static/js/bundle.js:27464:32)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3000/static/js/bundle.js:27388:36)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3000/static/js/bundle.js:27366:10)
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:3000/static/js/bundle.js:27287:12)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:3000/static/js/bundle.js:27203:12)
    at Object.performUpdateIfNecessary (http://localhost:3000/static/js/bundle.js:33781:22)
    at runBatchedUpdates (http://localhost:3000/static/js/bundle.js:34548:21)
    at ReactReconcileTransaction.perform (http://localhost:3000/static/js/bundle.js:36558:20)
    at ReactUpdatesFlushTransaction.perform (http://localhost:3000/static/js/bundle.js:36558:20)
    at ReactUpdatesFlushTransaction.perform (http://localhost:3000/static/js/bundle.js:34487:32)
    at Object.flushBatchedUpdates (http://localhost:3000/static/js/bundle.js:34570:19)
    at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:3000/static/js/bundle.js:36624:25)
    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:36571:16)
    at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:31192:26)
    at Object.enqueueUpdate (http://localhost:3000/static/js/bundle.js:34598:22)
    at enqueueUpdate (http://localhost:3000/static/js/bundle.js:34177:16)
    at Object.enqueueForceUpdate (http://localhost:3000/static/js/bundle.js:34309:5)
    at GraphQL../node_modules/react/lib/ReactBaseClasses.js.ReactComponent.forceUpdate (http://localhost:3000/static/js/bundle.js:44378:16)
    at GraphQL.forceRenderChildren (http://localhost:3000/static/js/bundle.js:21163:26)
    at next (http://localhost:3000/static/js/bundle.js:21138:27)
    at Object.handleError [as error] (http://localhost:3000/static/js/bundle.js:21142:32)
    at http://localhost:3000/static/js/bundle.js:2095:29
    at Array.forEach (<anonymous>)
    at Object.error (http://localhost:3000/static/js/bundle.js:2093:33)
    at http://localhost:3000/static/js/bundle.js:2488:38
    at http://localhost:3000/static/js/bundle.js:2974:25
    at Array.forEach (<anonymous>)
    at http://localhost:3000/static/js/bundle.js:2971:27
    at Array.forEach (<anonymous>)
    at QueryManager../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (http://localhost:3000/static/js/bundle.js:2968:42)
    at http://localhost:3000/static/js/bundle.js:2437:31
    at <anonymous>
mbrochh commented 7 years ago

Can you post your code in ./frontend/src/App.js, especially this part here:

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        [...]
      </ApolloProvider>
    )
  }
}
voyageanp commented 6 years ago

This may be internal error because once I tested on another computer, it worked and this is reasonable for me because the setting of that computer was a little bit unique. Thanks for the follow up