Maximum call stack size exceeded in react-admin with ra_data_graphql_simple when schema with nested object

Question

I dove in head first to try react-admin as the admin solution for some simple data entry for an application but i find the docs lacking and i have searched for a solution to this online after many hours of debugging.

My Problem:

When nested objects are present in my schema as follows..

type Country {
country_id: ID!
name: String
abbr2: String
abbr3: String
provincesOrStates: [ProvinceState]}

react-admin will fail with the error: Maximimum call stack size exceeded.. it does not even make a call to my graphql server in that case after the introspection, i can see that in my developer tools. My back end is Apollo Server with Sequelize as my ORM and my dependencies are as follows there:

"dependencies": {
"apollo-server": "^2.4.2",
"dataloader-sequelize": "^1.7.9",
"dotenv": "^6.2.0",
"graphql": "^14.1.1",
"graphql-import": "^0.7.1",
"graphql-list-fields": "^2.0.2",
"graphql-tools": "^4.0.4",
"lodash": "^4.17.11",
"merge-graphql-schemas": "^1.5.8",
"pg": "^7.8.0",
"pg-hstore": "^2.3.2",
"save": "^2.3.3",
"sequelize": "^4.42.0"}

I should note that GraphiQL works just fine with the nested objects and returns the expected data.. The schema is modeled exactly the way the simple data provider from marmelabs suggested

My react-admin is nothing special... it is set up exactly the same as the examples they list in the readme... my App.js code is as follows

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


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

        buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:3030/graphql' }})
            .then(dataProvider => this.setState({ dataProvider }));
    }

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

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

        return (
            <Admin dataProvider={dataProvider}>
                <Resource name="Country" options={{ label: 'Countries' }} list={ListGuesser}/>
            </Admin>
        );
    }
}

export default App;

and my dependencies in that project are:

"dependencies": {
    "graphql": "^14.1.1",
    "prop-types": "^15.7.1",
    "ra-data-graphql-simple": "^2.7.1",
    "ra-data-json-server": "^2.7.1",
    "ra-data-simple-rest": "^2.7.1",
    "react": "^16.8.1",
    "react-admin": "^2.7.1",
    "react-dom": "^16.8.1",
    "react-scripts": "2.1.5"
  }

The only way it will even send the call to the graphql server for allCountries is if there is no nesting in the Country object when the introspection query runs. I tested with it in and out multiple times to be sure. Obviously i need it in. I also thought maybe the ListGuesser was being a problem so i took that out and put in a simple CountryList component that only wanted the name... That did not help.

I also looked at other related questions based around maximum call stack exceeded but i'm not sure that message is not just a red herring since whether or not the schema object was nested should be neither here nor there to the UI if it is ignoring it. i put console logs in to make sure i was not getting some endless loop (not knowing react well) and indeed i am not, and obviously since this sample code would be most peoples landing point, it must work for most.

Can someone point me in the right direction here?

Answer 1

Ok, i don't know what happened but somebody posted an answer here that i saw a tiny bit of on my phone screen.. enough to know that they asked if my province had a relation back to country, and it did.. The answer was deleted or gone by the time i got back to my laptop, but that was indeed the problem... Whoever it was that answered it saved me some more headaches before i worked my way down to that.

So for anyone who lands here with a similar problem, be very careful the way you do your associations in sequelize and start small.. I bit off more than i was experienced enough to chew trying to get it all working at once bouncing back and forth between react-admin and Apollo Server and that got me screwed up and wasted time.. Introspection pointed out the problem but me not being a front end developer i didn't know where to look to solve it. GraphiQL did not point it out because i was not calling the queries in a way that would have shown me the issue... I'll be happy to contribute more as i get this stuff all sorted... Cheers