React-admin: ra-data-graphql-simple shows error when plugged to apollo-server

[elie222]

What you were expecting:
Not to throw an error.

What happened instead:
Throws an error on startup:

Error: Unknown resource undefined. Make sure it has been declared on your server side schema. Known resources are Bike

Steps to reproduce:
Reproduction:
https://github.com/elie222/bike-sharing

Start server:

cd server
yarn
yarn watch

Start Admin client:

cd admin
yarn
yarn start

Related code:

const App: React.FC = () => {
  const [dataProvider, setDataProvider] = React.useState(null)

  React.useEffect(() => {
    const onMount = async () => {
      const provider = await buildGraphQLProvider({
        clientOptions: { uri: 'http://localhost:4000/graphql' },
      })

      setDataProvider(provider)
    }

    onMount()

    return () => {}
  }, [])

  if (!dataProvider) return <div>Loading</div>

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="Bike" />
    </Admin>
  )
}

Other information:

Environment

• React-admin version: ^2.9.2
• Last version that did not exhibit the issue (if applicable):
• React version: ^16.8.6
• Browser: Version 74.0.3729.169 (Official Build) (64-bit)
• Stack trace (in case of a JS error):

buildQuery.js:15 Uncaught Error: Unknown resource undefined. Make sure it has been declared on your server side schema. Known resources are Bike
    at buildQuery.js:15
    at raDataProvider (index.js:240)
    at index.js:80
    at basicStateReducer (react-dom.development.js:13611)
    at updateReducer (react-dom.development.js:13741)
    at updateState (react-dom.development.js:13790)
    at Object.useState (react-dom.development.js:14366)
    at Object.useState (react.development.js:1495)
    at App (App.tsx:6)
    at renderWithHooks (react-dom.development.js:13449)
    at updateFunctionComponent (react-dom.development.js:15199)
    at beginWork (react-dom.development.js:16252)
    at performUnitOfWork (react-dom.development.js:20279)
    at workLoop (react-dom.development.js:20320)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:19503)
    at renderRoot (react-dom.development.js:20433)
    at performWorkOnRoot (react-dom.development.js:21357)
    at performWork (react-dom.development.js:21267)
    at performSyncWork (react-dom.development.js:21241)
    at requestWork (react-dom.development.js:21096)
    at scheduleWork (react-dom.development.js:20909)
    at dispatchAction (react-dom.development.js:14118)
    at onMount (App.tsx:18)

[djhi]

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!

[elie222]

Not sure the difference between a bug and a how to question in that case.

That it managed to look for resource undefined with this code looks like a bug to me:

    <Admin dataProvider={dataProvider}>
      <Resource name="Bike" />
    </Admin>

[fzaninotto]

I agree that this is a bug, albeit caused by an abnormal use. We'll fix it someday, but it's low priority.

[elie222]

Could you explain the abnormal use at least?

Is it a problem with the graphql library? I have done a decent amount of
digging into the codebase to find the issue. If you could explain why it’s
happening I’d be happy to make a PR with a fix myself.

On Mon, 17 Jun 2019 at 15:38 Francois Zaninotto [e-mail]
wrote:

Reopened #3340 https://github.com/marmelab/react-admin/issues/3340.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/marmelab/react-admin/issues/3340?email_source=notifications&email_token=AAXSQX4PXSFGY7MK5ZQYZTDP26ATVA5CNFSM4HYQO2H2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSALWT6I#event-2417453561,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAXSQX6ISMTRRIEZXDDMLX3P26ATVANCNFSM4HYQO2HQ
.

[djhi]

I think that's because you're missing the _allBikes query which returns meta data (total number of items matching a query). See the https://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql-simple README.

This is actually the reason why I closed this as not an issue with the ra-data-graphql-simple but with your code. We could do better in terms of developper experience though: showing console logs about GQL entities from the schema which might be resources but miss the required queries such as the meta data one.

[elie222]

Implementing _allBikes or _allBikesMeta didn't fix it, but will continue to search and see if it's some other query I'm missing causing problems.

[jpagand]

Facing the exact same issue
Have you found something @elie222 ?

[elie222]

I haven’t played with it in a few days. I don’t think I’ll continue to use
this package in the future however and instead write my own data provider.
It’s not flexible enough. I don’t like the schema it’s forcing one to stick
to. There are a few examples of graphql providers in the docs. One is
hasura.

On Fri, 21 Jun 2019 at 15:48 jpagand [e-mail] wrote:

Facing the exact same issue
Have you found something @elie222 https://github.com/elie222 ?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/marmelab/react-admin/issues/3340?email_source=notifications&email_token=AAXSQX5HU3FRUUO6DFYKJNLP3TEYNA5CNFSM4HYQO2H2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYILXPI#issuecomment-504413117,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAXSQX3FFT6R6TCGTERCCVDP3TEYNANCNFSM4HYQO2HQ
.

[vladoro]

I have exactly the same problem. 'ra-admin-graphql-simple' just doesn't work with apollo server.

[jpetitcolas]

I also encountered the issue, and actually, that's not a bug of React Admin, but a React Hook misuse. :)

You are using the React setter like:

setDataProvider(provider);

Yet, according to the doc:

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

So, instead of just returning the provider, return a function returning the provider:

setDataProvider(() => provider);

[fzaninotto]

Thanks @jpetitcolas. Indeed, that's not a bug in react-admin, so I'm closing this issue.

[etienne-bondot]

@jpetitcolas solution works fine, thanks a lot.

I think that many people will ends here looking for what's wrong. It could be useful to improve the ra-data-graphql documentation adding an example with hooks here https://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql#usage.

[rhoffmann]

Thanks @jpetitcolas. Indeed, that's not a bug in react-admin, so I'm closing this issue.

I also encountered the issue, and actually, that's not a bug of React Admin, but a React Hook misuse. :)

You are using the React setter like:

setDataProvider(provider);

Yet, according to the doc:

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

So, instead of just returning the provider, return a function returning the provider:

setDataProvider(() => provider);

Well, i do not really see how a simple setDataProvider(provider); would be wrong, just adapting the promise-based example on the aformentioned documentation page. The state update is not based upon the previous state, so it should not be necessary.

But somehow only the functional update works. It would indeed be great to update the documentation for a hook base approach in that case.

Also it would be great to have some kind of feedback what is going on (wrong) with the schema introspection in terms of assumed naming etc. Currently i have no idea what is going wrong, or am i missing an option?

[mayteio]

@rhoffmann it works because if you pass a function directly, the hook will try to use it as the updater function (with previous state as the first argument, etc).

const dataProvider = (introspection) => {...}
setState(dataProvider) //is like running
setState((introspection) => {...}) // where, in this case, introspection is actually the previous state

setState(() => dataProvider) // works because it's returning the function as a value instead of calling it.