Error in fetching data URL scheme "mongodb+srv" is not supported

Working with Data
1

I tried using basic fetch and connecting my react app with MongoDB but it is throwing error. I tried all of possible tutorial but I can’t fix this please help.

here is my code snipper

const response = await fetch(`mongodb+srv://uname:pass@cluster0.v6btaez.mongodb.net/db_sample?retryWrites=true&w=majority`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`
        window.alert(message)
        return;
      }
3

Hi @nut_craker and welcome to MongoDB community forums!!

In order to assist you further, could you help us with few information regarding the error that you are facing:

  1. What is the error you are facing while making the connection?
  2. What are the documentations you are following ?
  3. Is the connection working with other drivers or in mongoshell or compass?
    The following documents on How to connect the React App with MongoDB would be a good starting point for the development.

Regards
Aasawari

4

I finally figured it out. I had the MONGODB_URI in the environment name for the client in Render. I was supposed to have the name of the Server’s Website on Render.

5

I am having the same problem. It works fine locally. My app is deployed on Render and the logs on Render say the database is connected. I have been struggling with this for days. Any help would be greatly appreciated.

This is the error (I replace username and password which is stored in my server’s .env file):
index-BuReeJGG.js:74 Fetch API cannot load mongodb+srv://username:pw@cluster0.6aezan4.mongodb.net/Sandals/api/stluciablogs. URL scheme “mongodb+srv” is not supported.

THIS THE LOGIC IN CLIENT:
const baseUrl = ${import.meta.env.VITE_SERVER_URL}/api/stluciablogs;

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(baseUrl);
if (!response.ok) {
throw new Error(Failed to fetch data: ${response.status});
}
const data = await response.json();
setData(data);
setIsLoading(false);
} catch (error) {
setError(“Error fetching data,” + error.message);
setIsLoading(false);
}
};
fetchData();
}, );

THIS IS THE SERVER LOGIC:

app.get(“/api/stluciablogs”, async (req, res) => {
try {
const data = await StLuciaBlogs.find({});
if (!data || data.length === 0) {
return res.status(404).json({ message: “No blogs found” });
}
res.status(200).json(data);
} catch (error) {
console.error(“Error fetching St. Lucia blogs:”, error);
res.status(500).json({ error: “An error occurred while fetching blogs” });
}
});

This is the connect DB:
const mongoose = require(‘mongoose’);
require(‘dotenv’).config()

const connectDB = async () => {
try {
mongoose.set(‘strictQuery’, false);
const conn = await mongoose.connect(process.env.MONGODB_URI);
console.log(Database Connected ${conn.connection.host});
} catch (error) {
console.log(error);
process.exit(1);
}
}

module.exports = connectDB;