I am getting TypeError: Cannot read properties of undefined (reading 'list')
I used @ferdiunal/refine-shadcn in my Next.js project, and copied same code in the example but getting I got TypeError: this[#client].defaultMutationOptions is not a function error. I searched about that but everyone says it's react-query problem. So I downgraded react-query to v4.
then I am getting TypeError: Cannot read properties of undefined (reading 'list').
How to fix this issue?
2 Replies
Hi @Ghostman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, it appears you're experiencing a common issue with refine and React Query compatibility. Let me help you troubleshoot this.
The error you're encountering is related to React Query version compatibility with refine. Currently, refine only supports React Query v4 and is not yet compatible with v5. This is confirmed in several GitHub issues where users experienced similar errors.
For the specific errors you're seeing:
1. First error (
TypeError: this[#client].defaultMutationOptions is not a function): This is indeed a React Query v5 compatibility issue with refine, as mentioned in GitHub issue #6408 and GitHub issue #6433.
2. Second error (TypeError: Cannot read properties of undefined (reading 'list')): This could be related to how the data provider is returning data. Similar issues were reported in GitHub issue #4572 where the data structure expected by hooks like useSelect was different from what was being returned.
Here are some solutions to try:
1. Make sure you've explicitly installed React Query v4, not just downgraded. As mentioned in the issues, you should install a specific v4 version:
2. Check if you have any other packages that might be bringing in React Query v5 as a dependency. For example, tRPC v11 requires React Query v5, which can cause conflicts.
3. If you're using a custom query client, make sure you're not destructuring methods like invalidateQueries as mentioned in GitHub issue #6254.
4. Verify that your data provider is returning data in the correct format expected by refine hooks.
5. Try clearing your node_modules folder and reinstalling dependencies to ensure there are no conflicting versions.
The refine team is aware of the React Query v5 compatibility issue and has it in their backlog (GitHub issue #5370), but there's no specific timeline for when this will be resolved.
If these solutions don't work, providing more details about your specific implementation and the full error stack trace would help in diagnosing the issue further.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1014424596260343818> Kapa.ai is still learning and improving, please let me know how I did by reacting below.