React-admin: ra-data-graphql errors if buildGraphQLProvider() is called w/out options

Created on 2 Nov 2018 · 7Comments · Source: marmelab/react-admin

Documentation indicates that a simple initialization can be performed with

componentDidMount() {
        buildGraphQLProvider()
            .then(dataProvider => this.setState({ dataProvider }));
    }

However, this leads to an error because ApolloClient constructor is called without anythings specified for options.

Uncaught (in promise) TypeError: Cannot read property 'link' of undefined
    at new ApolloClient (ApolloClient.js:30)
    at buildApolloClient.js:34

That line of code in ApolloClient.js:30 looks like

var ApolloClient = function () {
  function ApolloClient(options) {
    var _this = this;

    this.defaultOptions = {};
    this.resetStoreCallbacks = [];
    var link = options.link,         <----------------- Error

* Steps to reproduce *

npx create-react-app react-admin-sample
cd react-admin-sample/
npm install -save react-admin
npm install --save graphql ra-data-graphql

vi src/App.js

import React, { Component } from 'react';
import buildGraphQLProvider from 'ra-data-graphql';
import { Admin } from 'react-admin';


class App extends Component {
  constructor() {
    super();
    this.state = { dataProvider: null };
  }
  componentDidMount() {
    buildGraphQLProvider()
      .then(dataProvider => this.setState({ dataProvider }));
  }

  render() {
    const { dataProvider } = this.state;

    if (!dataProvider) {
      return <div>Loading</div>;
    }

    return (
      <Admin dataProvider={dataProvider}>
      </Admin>
    );
  }
}

export default App;

Environment
OSX

dependencies": { "graphql": "^14.0.2", "ra-data-graphql": "^2.4.1", "react": "^16.6.0", "react-admin": "^2.4.1", "react-apollo": "^2.2.4", "react-dom": "^16.6.0", "react-scripts": "2.1.1" },

bug documentation good first issue

Source

michaelaltmann

👍1

Most helpful comment

I think the minimal syntax for initialization is something like

  builder() {
    // ...
  }
  componentDidMount() {
    const options = {
      clientOptions: {
        link: new HttpLink({ uri: 'http://api.githunt.com/graphql' }),
        cache: new InMemoryCache()
      },
      buildQuery: this.builder
    }
    buildGraphQLProvider(options)
      .then(dataProvider => this.setState({ dataProvider }));
  }

michaelaltmann on 2 Nov 2018

👍4

All 7 comments

I think the minimal syntax for initialization is something like

  builder() {
    // ...
  }
  componentDidMount() {
    const options = {
      clientOptions: {
        link: new HttpLink({ uri: 'http://api.githunt.com/graphql' }),
        cache: new InMemoryCache()
      },
      buildQuery: this.builder
    }
    buildGraphQLProvider(options)
      .then(dataProvider => this.setState({ dataProvider }));
  }

michaelaltmann on 2 Nov 2018

👍4

ping @djhi

fzaninotto on 5 Nov 2018

The ra-data-graphql readme seems outdated.
In Customize the Apollo client, it uses createNetworkInterface, which is from Apollo Client 1.0.
Are there any plans to improve this?