React Native fetch from MongoDB not working

Question

Got an app connected to my database with some messages i want to fetch and render. i had this working back home but I came here to my girl's mom's house and it's all out of whack; TypeError messages. I'm using the iOS simulator so i feel like there's some sort of issue since i'm making the fetch call while running the app from there. Please take a look and tell me what you think!

const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);

const bodyParser = require('body-parser');
const Message = require("./models/message");
const mongoose = require('mongoose');

// MongoDB connection
mongoose.connect(
  'mongodb+srv://blahblah', {
    useNewUrlParser: true,
    useUnifiedTopology: true
  }).then(() => {
    console.log('Connected to the database!')
  }).catch(() => {
    console.log('Connection failed oh noooooo!')
});

// Parse the request body as JSON
app.use(bodyParser.json());

// GET messages
app.get("http://192.168.0.17:8010/api/messages", (req, res) => {
  Message.find({}).exec((err, messages) => {
    if(err) {
       res.send(err).status(500);
    } else {
       res.send(messages).status(200);
    }
  });
});

// POST messages
app.post('http://192.168.0.17:8010/api/messages', (req, res) => {
  Message.create(req.body).then((message) => {
      res.send(message).status(200);
  }).catch((err) => {
      console.log(err);
      res.send(err).status(500);
  });
});

// Socket.io connection
io.on("connection", socket => {
  socket.emit('your id', socket.id);
  socket.on('send message', body => {
      io.emit('message', body)
  })
  console.log("connected")
})

server.listen(8010, () => console.log("server is running on port 8000", server.address()));

import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, Text, TextInput, View, Button, FlatList, ScrollView } from 'react-native';
import io from 'socket.io-client'

const ChatRoom = () => {

  const [yourID, setYourID] = useState();
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState([]);
  const [username, setUsername] = useState([]);

  const socketRef = useRef();

  useEffect(() => {
    socketRef.current = io.connect('/');   
    // Sets your ID on connection
    socketRef.current.on("your id", id => {
      setYourID(id)
      console.log(id)
    })
    console.log("socket connection worked")
    socketRef.current.on("message", (message) => {
    recievedMessage(message);
    console.log(message)
    })
    // Gets the messages from the database and sets my messages with them. Peep the concat.
    fetch("http://192.168.0.17:8010/api/messages", {
      method: "GET"
    }).then((res) => {
      return res.json()
    }).then((resJSON) => {     
      console.log(resJSON)
      setMessages(resJSON.concat())
    }).catch((err) => {
      console.log(err)
    });
  }, []);

    function recievedMessage(message) {
      setMessages(oldMsgs => [...oldMsgs, message])
    }
      
    function sendMessage(e) {
      e.preventDefault();
      // Props on this guy match up with the schema.
      const messageObject = {
          body: message,
          username: username,
          id: yourID
    };
      setMessage("")
      socketRef.current.emit("send message", messageObject);
      // Sends the message to the database on submit. Uses the messageObject
      fetch("http://192.168.0.17:8010/api/messages", {
          method: "POST",
          headers: {
              "Content-Type": "application/json"
          },
          body: JSON.stringify(messageObject)
      }).then((res) => {
          console.log(res)
          return res.json();
      }).catch((err) => {
          console.log(err);
      });
    }

    // function handleChange(e) {
    //   setMessage(e.target.value);
    // }

    // function handleChangeUsername(e) {
    //   setUsername(e.target.value);
    // }

  return (
    //Send down the info, render the chat shit
    
      
        {messages.map((message, index) => {
          if (message.id === yourID) {
            return (
              
                
                  {message.body}
                
              
            )
          }
          return (
            
              
                {message.username}:   {message.body}
              
            
            )
          })}
        

            
                
                     setMessage(message)} 
                    placeholder="Say something..." />

Anupama Codippily · Accepted Answer

The following changes need to be made:

In the express server code, remove the "http://192.168.0.17:8010" from all the app's get and post functions. So, for example:

   app.get("http://192.168.0.17:8010/api/messages", (req, res) => {

should be

    app.get("/api/messages", (req, res) => {

Reason: The "/api/messages" is just an endpoint exposed at whichever IP address (could be 192.168.0.17 or any other IP) where your express application is hosted.

In your React Code: you may need to check the IPv4 address on your development machine/ where ever the express app is hosted. On windows you can do this by typing in ipconfig in the command line.

Add that to your fetch request, in the React app

React Native fetch from MongoDB not working

Answers (2)

Related Questions