getting error Cannot read properties of undefined (reading 'data')

[asoral]

Hi.. I am trying to fetch data using method:

const {data, isLoading, error} = useFrappeGetDocList('Serial No',{})
      console.log("data:", data, isLoading, error);

I am getting this error..

 data: undefined false TypeError: Cannot read properties of undefined (reading 'data')
    at frappe-react-sdk.es.js:293:36
    at async frappe-react-sdk.es.js:1982:32

[nikkothari22]

@asoral - your usage of the useFrappeGetDocList hook is wrong.

It should be const { data, isLoading, error } = useFrappeGetDocList('Serial No')

If you are not sending any params, you can leave the second argument as undefined.

data will be undefined/null to start with because it's still fetching the data.

[asoral]

tried using const { data, isLoading, error } = useFrappeGetDocList('Serial No');

console.log("data:", data, isLoading, error);

still getting same error.. data: undefined false TypeError: Cannot read properties of undefined (reading 'data') at frappe-react-sdk.es.js:293:36 at async frappe-react-sdk.es.js:1982:32

[nikkothari22]

As I mentioned, Data will be undefined when the request is made. It'll have data when the API call is successful. Did you check if there's any error in the error variable?

[asoral]

when request is made at initial stage data is undefined, isLoading is true and then error also underfined... after isLoading is false then also data is undefined and error is, TypeError: Cannot read properties of undefined (reading 'data')

[nikkothari22]

Oh okay. Did you setup the FrappeProvider correctly?

[asoral]

yes.. please check once.. <FrappeProvider socketPort={import.meta.env.VITE_SOCKET_PORT ?? ''} url="http://localhost:8000">

{/* } /> */} } />

[nikkothari22]

Is your React app setup using Doppio and is served with the Frappe app? Which port is your React app running on? Do you have a Vite proxy setup?

[asoral]

yes.. my react app is running on port 8080 yes i have proxyOptions.js file.. but my frappe app is running on version 14..

[asoral]

proxyOptions.js -

const common_site_config = require('../../../sites/common_site_config.json'); const { webserver_port } = common_site_config;

export default { '^/(app|api|assets|files|private)': { target: http://localhost:${webserver_port}, ws: true, router: function(req) { const site_name = req.headers.host.split(':')[0]; return http://${site_name}:${webserver_port}; } } };

[nikkothari22]

Can you provide a minimum reproducible example? Maybe a Git repository that I can clone to debug this? We use the SDK on multiple apps and sites and haven't encountered this error yet.

[asoral]

Hello... here I am providing git repo... i have done basic setup of react sdk with frappe-bench and trying to fetch data from frappe doctype as you have done in your youtube video.. but while fetching data using method useFrappeGetDocList i am getting error == {exception: 'frappe.exceptions.PermissionError: Serial No', exc: '["Traceback (most recent call last):\n File \"app…nfrappe.exceptions.PermissionError: Serial No\n"]', _error_message: 'Insufficient Permission for Serial No', httpStatus: 403, httpStatusText: 'FORBIDDEN', …} exc : "[\"Traceback (most recent call last):\n File \\"apps/frappe/frappe/app.py\\", line 104, in application\n response = frappe.api.handle()\n File \\"apps/frappe/frappe/api.py\\", line 53, in handle\n return _RESTAPIHandler(call, doctype, name).get_response()\n File \\"apps/frappe/frappe/api.py\\", line 71, in get_response\n self.handle_resource()\n File \\"apps/frappe/frappe/api.py\\", line 85, in handle_resource\n self.handle_doctype_resource()\n File \\"apps/frappe/frappe/api.py\\", line 107, in handle_doctype_resource\n self.get_doc_list()\n File \\"apps/frappe/frappe/api.py\\", line 179, in get_doc_list\n data = frappe.call(frappe.client.get_list, self.doctype, frappe.local.form_dict)\n File \\"apps/frappe/frappe/init.py\\", line 1682, in call\n return fn(*args, *newargs)\n File \\"apps/frappe/frappe/utils/typing_validations.py\\", line 31, in wrapper\n return func(args, kwargs)\n File \\"apps/frappe/frappe/client.py\\", line 64, in get_list\n return frappe.get_list(*args)\n File \\"apps/frappe/frappe/init.py\\", line 1947, in get_list\n return frappe.model.db_query.DatabaseQuery(doctype).execute(args, **kwargs)\n File \\"apps/frappe/frappe/model/db_query.py\\", line 125, in execute\n self.check_read_permission(self.doctype, parent_doctype=parent_doctype)\n File \\"apps/frappe/frappe/model/db_query.py\\", line 517, in check_read_permission\n self._set_permission_map(doctype, parent_doctype)\n File \\"apps/frappe/frappe/model/db_query.py\\", line 530, in _set_permission_map\n raise frappe.PermissionError(doctype)\nfrappe.exceptions.PermissionError: Serial No\n\"]" exception : "frappe.exceptions.PermissionError: Serial No" httpStatus : 403 httpStatusText : "FORBIDDEN" message : "There was an error while fetching the documents." _error_message : "Insufficient Permission for Serial No"

Here is i am providing github repo please check and help me out to resolve this issue..

https://github.com/sumanmunde123/React_Sdk_Issue.git

[nikkothari22]

Hey @asoral - this seems to be an authentication/permission issue. The error states that you do not have permission to access the Serial No Doctype.

You need to see if you have logged in or not, and if the user has permission to access Serial No.

[asoral]

@nikkothari22 Resolved.. Thanks..