I have the most simple code possible to check react-admin:
import React, { Component } from "react";
import buildGraphQLProvider from "ra-data-graphql-simple";
import { Admin, Resource } from "react-admin";
import posts from "./routes/posts";
class App extends Component {
constructor() {
super();
this.state = { dataProvider: null };
}
componentDidMount() {
buildGraphQLProvider({
clientOptions: { uri: "https://countries.trevorblades.com" }
})
.then(dataProvider => this.setState({ dataProvider }))
.catch(e => console.log(e.message));
}
render() {
const { dataProvider } = this.state;
if (!dataProvider) {
return <div>Loading</div>;
}
return (
<Admin dataProvider={dataProvider}>
<Resource name="Post" {...posts} />
</Admin>
);
}
}
export default App;
but I always get the same error: Cannot read property 'name' of null
My dependences are:
"graphql": "14.6.0",
"graphql-tag": "2.10.1",
"ra-core": "3.1.4",
"ra-data-graphql-simple": "3.1.4",
"react": "16.12.0",
"react-admin": "3.2.0",
"react-apollo": "3.1.3",
"react-dom": "16.12.0",
"react-scripts": "3.0.1"
What I'm doing wrong??
Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.
This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.
So I'm closing this issue, and inviting you to ask your question at:
http://stackoverflow.com/questions/tagged/react-admin
And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!
So ... it's half a year later, and there still isn't an answer to this question ... here, on Stack Overflow, or anywhere else.
Rather than helping anyone understand or use the library @fzaninotto, all you accomplished was scaring me and others away from using it (because who wants to use a library where you try the code on the front page, it gives a completely inscrutable error, and not even the maintainers can be arsed to explain that error?)
Sorry you feel that way. It's an open source project. We work on it and make it available for free. We do our best to answer questions on Stack Overflow but sometimes, we miss some.
If you think there is an issue with the documentation, please create a codesandbox showing the issue.
Look, I'm super sympathetic to the fact that open source work is 100% an unpaid job. I didn't at all mean to suggest you are a bad person for not investing more time on this issue, and I sincerely apologize if I came across that way.
My point was more ... if even one person takes the time to downvote your response, that's a sign. When three do it ... well imagine how many more are similarly frustrated, find this issue, and don't downvote it ... and then imagine how many more don't even find this issue (buit are similarly frustrated).
So, I think there's an unambiguous signal that your documentation could be better, if someone just took the time to understand "why do people keep getting this error?" and address it. As the maintainer it's completely reasonable to say "I acknowledge it could be better, but I don't have the bandwidth"! But instead of saying that, your previous reply seemed to amount to "this isn't the library's fault in any way: users just don't understand how it works, so they need to go to Stack Overflow to learn how."
If you think there is an issue with the documentation, please create a codesandbox showing the issue.
I think this kind of response was much more what I (and I imagine the other thumbs down folks) had hoped for: thank you! I wound up abandoning this library and going with another solution, but FWIW I think one very simple way to improve things would be to add a single one sentence before/after this code in your Readme.
import * as React from "react";
import { render } from 'react-dom';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
render(
<Admin dataProvider={restProvider('http://localhost:3000')}>
<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon}/>
</Admin>,
document.getElementById('root')
);
which says something to the effect of
This only works IF you render directly to the DOM ... yes we know that the first thing every React dev will want to do is not write it that way (because we see that structure in lots of React component demos/examples, but no one renders anything except App directly to the DOM, so the first thing we all do is treat our new component like a normal component and move it below App) ... if you try and do that, the same as you would with every other component you ever use, you'll get an error "Cannot read property 'name' ..."
P.S. That's just my guess as to the cause; as I said I abandoned the library, so I never confirmed that not using ReactDOM.render was the core issue.