Hi. This topic is about the Off-platform project (based on RESTful Restaurants) where using supabase and external APIs. The instructions can be found HERE
The issue is when back-end tries to fetch data from supabase. I get:
const flattenedData = data.map((record) => flattenObject(record));
TypeError: Cannot read properties of null (reading 'map')
at C:\Projects\RESTful Restaurants (External APIs)\external-api\solution-code\backend\routes\starredRestaurants.js:23:30
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Node.js v18.16.0
[nodemon] app crashed - waiting for file changes before starting...
It all started with some packages issues with the front-end and I have run npm update and npm audit fix --force. These two fixed the front-end.
Can anyone help me please?
I just encountered the same error. But I noticed an issue prior to hitting it. After adding “Taco Express” with a comment, I went back to Supabase’s table editor and looked at the data for starred_restaurants. There was the new entry, but the restaurantId foreign key was NULL. That is definitely going to break something. After going back and refreshing the frontend in the browser, it crashed with this error you listed.
If I delete this incorrect row from supabase, restart the backend, and then refresh the browser, it works fine again. It is likely a problem with Codecademy’s code. I’ll have to debug it.
It appears to clear the foreign key in the starred restaurant PUT handler when calling update() on the starredRestaurantProvider. If I set the restaurantId column to not nullable in the database schema, it stops it from clearing the data in the FK, but I haven’t figured out why it was clearing it in the first place.
But this isn’t solving the problem. After editing a comment, the backend still crashes on browser refresh. But now if you simply restart the backend and refresh again, it works fine and the updated comment is there. So it gets into a bad state after you edit a comment and restarting the backend fixes it.
The crash is occurring in the GET(“/”) function. Data is NULL from the Select() call. Adding a check for Error in the response, I get the following using JSON.stringify(error):
{“message”:“FetchError: Request with GET/HEAD method cannot have body.”,“details”:“”,“hint”:“”,“code”:“”}
If I protect the existing code in the get() router function to only “if (data)”, otherwise just return “res.json()” instead, then the crash stops and starred restaurants are blank until the backend is restarted.
Searching for the error doesn’t give me much. Just “don’t include a body in your request”. Even ChatGPT wasn’t much help. As a quick test, I edited one of the restaurants (e.g. changed “Taco Express” to “Tacos Now”) and then refreshed and had the same issues. But this time on the restaurants table. The select is returning the same error.
The version of the supabase-js module being used here was v1.25.2. Looking on GitHub, the latest version is v2.26.0. So I updated the package.json file to use the latest version and ran npm update. Now the error problem on select went away, but instead there is a new one. After performing an update, only the updated entry is returned by the select call. The others are not being returned unless you restart the backend.
I think I’m done working on this for now. Supabase apparently has issues. Maybe I’ll create a simple example that demonstrates this and submit a bug report.
Can’t really tell without looking at your code, but the problem here is with your null “data” variable. Assuming you’ve not changed the logic of how “data” is handled, your problem comes from supabase.js.
Put a few breakpoints in your supabase.js. and see what/where it fails.