medusa icon indicating copy to clipboard operation
medusa copied to clipboard

Published 20 hours ago • verified publisher icon medusajs

Cannot use react-query for custom queries while using medusa-react

Open sheikhumar93 opened this issue 3 years ago • 4 comments

Bug report

Describe the bug

Importing and using react-query inside the Gatsby admin while simultaneously using the medusa-react package is not possible. Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

System information

Medusa version (including plugins): Medusa: 1.3.3, medusa-react: 0.3.3, Node.js version: v16.16.0 Database: Postgres 14.4 Operating system: macOS Monterey 12.5

Steps to reproduce the behavior

  1. Create a new custom route in medusa server with medusa-extender
  2. Define this custom route in Gastby admin inside src/services/api.js
  3. Import useQuery from react-query inside a react component
  4. import Medusa from src/services/api.js inside the same react component
  5. Call the custom route using useQuery like this: const { data } = useQuery( "listCollections", () => Medusa.collections.listParentCategories )
  6. The error is thrown as shown above.

Expected behavior

useQuery should be available to use for custom routes inside Gatsby admin alongside medusa-react.

Additional context

Someone in the discord channel suggested that the problem is caused by 3. You might have more than one copy of React in the same app. I have tried

  1. cd project/node_modules/react
  2. yarn link
  3. cd ../medusa-react
  4. yarn link react
  5. cd ../..
  6. yarn run start

This does not resolve the issue. I have also verified that medusa-react has react listed as a peer dependency so that does not seem to be the issue.

sheikhumar93 avatar Aug 11 '22 05:08 sheikhumar93

Thanks for reporting this one in. @kasperkristensen Do you have an idea as to why this is happening?

olivermrbl avatar Aug 19 '22 16:08 olivermrbl

Hi @sheikhumar93,

I can't seem to replicate this issue, have you tried deleting your node_modules and reinstalling dependencies?

kasperkristensen avatar Aug 23 '22 14:08 kasperkristensen

Hi @sheikhumar93,

I can't seem to replicate this issue, have you tried deleting your node_modules and reinstalling dependencies?

Hello @kasperkristensen. Yes multiple times, tried both npm and yarn as well. I will create a reproducible repo later today and share it over here.

sheikhumar93 avatar Aug 24 '22 08:08 sheikhumar93

@sheikhumar93 Any update on the reprository?

olivermrbl avatar Sep 09 '22 09:09 olivermrbl

Do you have a code sample or codesandbox example?

JohnIrle avatar Oct 01 '22 17:10 JohnIrle

I'm going to go ahead and close this. I've tested it several times and we will soon be releasing an update to the admin dashboard where we use "custom" queries, and it does not result in such errors. If you are still experiencing this error then feel free to re-open the issue and provide a reproducible repo 🙂

kasperkristensen avatar Oct 13 '22 21:10 kasperkristensen