Server-Side API Calls to External APIs

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.

1 Like

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.

I’m having issues with this also. I’ve created the tables in supabase and my express server appears to connect but only returns an empty array into data.
I’ve been playing around with the code for about an hour and getting nowhere. I get response times in the log so it’s definitely connecting and recognising the database tables. If i log into supabase and SELECT * FROM restaurants in the sql editor, I get my 7 rows no problems. My URL and API key are correct. Table names are correct. I’m stumped. Tried logging the data and error and i get data: and error = null.
router.get(“/”, async (_req, res) => {
try {
const { data, error } = await supabaseProvider.from(“restaurants”).select(“*”);
console.log(“Supabase Response:”, { data, error });
res.json(data);
} catch (error) {
console.error(“Supabase Query Error:”, error);
res.status(500).send({ error: “Internal Server Error” });
}
});
The react app remains empty of any database data.

Solved. You need to disable RLS on each table or create a policy. This information isn’t in the module instructions.

4 Likes

@benenhuntley is totally right. The supabase UI will say No Active RLS Policies when you view the table but you need to click into that and entirely disable RLS (or create a policy) for each of the two tables.

1 Like

Hi.
Just wanted to say thanks. I guess I would never had figured this out myself or - in the better scenario - would have wasted hours and hours of my life.
Thanks a lot!

2 Likes