Unhandled (in react-apollo) Error: Network error: this.networkInterface.query is not a function

[acomito]

I'm hoping to make sure my dataIdFromObject is setup for meteor's _id but keep getting an error when I try this:

//APOLLO SPECIFIC
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { meteorClientConfig } from 'meteor/apollo';
import { ApolloProvider } from 'react-apollo';
import { Meteor } from 'meteor/meteor'

const customInterface = { 
    useMeteorAccounts: true,
    dataIdFromObject: o => o._id
}

const client = new ApolloClient(meteorClientConfig({ networkInterface: customInterface }));

export default client;

modules.js?hash=8821437…:140762 Unhandled (in react-apollo) Error: Network error: this.networkInterface.query is not a function
    at new ApolloError (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:25240:28)
    at ObservableQuery.currentResult (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:25348:25)
    at GraphQL.dataForChild (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:51282:62)
    at GraphQL.render (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:51320:33)
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17695:21
    at measureLifeCyclePerf (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:16974:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17694:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17721:32)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17645:36)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17623:10)
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17544:12)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:17460:12)
    at Object.performUpdateIfNecessary (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:10160:22)
    at runBatchedUpdates (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:9734:21)
    at ReactReconcileTransaction.perform (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:11011:20)
    at ReactUpdatesFlushTransaction.perform (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:11011:20)
    at ReactUpdatesFlushTransaction.perform (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:9673:32)
    at Object.flushBatchedUpdates (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:9756:19)
    at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:11077:25)
    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:11024:16)
    at Object.batchedUpdates (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:19900:26)
    at Object.enqueueUpdate (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:9784:22)
    at enqueueUpdate (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:18844:16)
    at Object.enqueueSetState (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:19039:5)
    at GraphQL.ReactComponent.setState (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:2048:16)
    at GraphQL.forceRenderChildren (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:51254:26)
    at next (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:51231:27)
    at Object.handleError [as error] (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:51235:32)
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:25570:29
    at Array.forEach (<anonymous>)
    at Object.error (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:25568:33)
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:26115:38
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:26543:25
    at Array.forEach (<anonymous>)
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:26540:27
    at Array.forEach (<anonymous>)
    at QueryManager.broadcastQueries (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:26537:42)
    at QueryManager.broadcastNewStore (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:25912:14)
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:26595:44
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:52345:16
    at Object.dispatch (http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:30695:18)
    at http://localhost:3000/packages/modules.js?hash=8821437b2d405485cf822b9d18cb1f61989326e4:26067:33
    at http://localhost:3000/packages/meteor.js?hash=27829e936d09beae3149ecfbf3332c42ccb1596f:1105:22
    at <anonymous>

[xavxyz]

👋 hey @acomito, thanks for filing an issue!

Firstly, you don't need to add a custom dataIdFromObject, the latest apollo-clientnormalizes the store with _id when it sees one (see code) 🎉

And the error you get is because it tries to use a method from a NetworkInterface, but you pass is just an object with two keys 😄 Check how to use createMeteorNetworkInterface if you want to customize the interface anyway!

Happy hacking! 👍

[acomito]

Thank you @xavcz

[acomito]

@xavcz is there any way to test locally on iphone/safair? I can't seem to connect via my:

const networkInterface = createMeteorNetworkInterface({
  uri: '00.0.0.000:3000/graphql',
});

const options = { 
    connectToDevTools: true,
    networkInterface
};
const config = meteorClientConfig(options)
const client = new ApolloClient(config);

My iphones plugged in to my macbook, but I can't seem to hit localhost:3000 or my IP:3000. I'm getting my HTML, but not server for login.

[acomito]

Update:

needed the write meteor/npm startup script to set the port:

"scripts": {
    "start": "meteor --port 000.000.00.00:3000 --settings settings-development.json ",

then correct client-side setup:

const networkInterface = createMeteorNetworkInterface({
  uri: 'http://000.000.00.00:3000/graphql',
});

const options = { 
    connectToDevTools: true,
    networkInterface
};
const config = meteorClientConfig(options)
const client = new ApolloClient(config);

export default client;

then good to go

[xavxyz]

Waow cool!