I'm new to Axios, and I was trying to fetch data from an endpoint to use in React...
import axios from "axios";
const api = axios.create({ baseURL: "http://localhost:5000/" });
export default function App() {
api.get("/products").then(res => console.log(res.data));
...
}
Here is my endpoint code...
const express = require("express");
const app = express();
require("dotenv").config();
app.get("/products", (req, res) => {
res.send("Hello world!");
});
const port = process.env.PORT;
app.listen(port, () => console.log(`Listening on port ${port}...`));
But instead of the Hello world! getting logged I am getting this error...
Any help would be appreciated.
Hi look for this lib Cors for express and you can use proxy in react project in your package.json instead of axios.create()
like
"proxy": "http://localhost:5000"
Install cors middleware in your backend server.
npm install cors
Enable all CORS requests
const express = require("express");
var cors = require('cors')
const app = express();
app.use(cors())
You can look for more information here. There are ways to configure your CORS as well.
To your another question, CRUD operations should be used in useEffect hook.
import React, { useEffect } from 'react';
export default function App() {
useEffect(() => {
api.get("/products").then(res => console.log(res.data));
}, [])
...
}
Related
I'm trying to connect to stripe server using express framework but I keep getting this error in the image I attached above.
import express from "express";
const app = express();
const port = 3000;
const PUBLISHABLE_KEY = "pk_test......";
const SECRET_KEY = "sk_test.........";
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
You have not did a GET method. Try to do - above the listening:
app.get('/',(req, res)=>{
res.send('Hello World')
});
Now, when you call http://localhost:3000/ you will see Hello World.
Hey i have a express app with a api route
app.get("/api", (req, res) => {
res.json({ message: "Its work !! !! !" });
});
And i have a reactjs app with that in package.json
"proxy": "http://localhost:3001",
When i want to go on api route of express app (http://localhost:3001/api) its work but its not work with my reactjs app when i go on (http://localhost:4000/api)
i start my webserver with
yarn run clean && cross-env NODE_ENV=development webpack-dev-server --host localhost --hot --https
The problem can be a problem from react router dom?
Resolved Solution:
In webpack config add proxy to devserver
As you are proxying requests, you can access the API endpoints from within react application (proxy parses requests to API), but nevertheless your API is still on its server (or another port on localhost f.e.)
Your React app just proxies the request
Example how to query your data with proxy configured:
import { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [data, setData] = useState();
useEffect(() => {
const getData = async () => {
// you can use /api here as you proxi it to your API url
// f.e. localhost:5000/api
const response = await axios.get("/api");
setData(response.data);
};
getData();
}, []);
// stringify your data in json
return <pre>{JSON.stringify(data, undefined, 2)}</pre>;
};
export default App;
I've been told that Axios is how you get React to talk to an api (external or internal). So far, I have specifically only received 404 errors whenever I try to implement Axios calls.
Here is the axios call in client/src/App.js:
import React, {Component} from 'react';
import './App.css';
import API from "./utils/API";
class App extends Component {
state = {
recipes: []
}
componentDidMount = () => {
API.getRecipes("milk") /* This is supposed to call the getRecipes
function in API.js with "milk" as the only
parameter (ie - Search the api for "milk"
related recipes). */
.then(res => this.setState({recipes: res.data}))
.catch(err => console.log(err));
}
render(){
return (
<div>
{
this.state.recipes.map(recipe => {
return(
<p>
{recipe.title} // All recipe names are then set to a p tag
</p>
)
})
}
</div>
);
}
}
export default App;
Now, this calls API.js in the "utils" folder:
import axios from "axios";
// Function that takes the parameter and is supposed to send it to the
/api/recipes route
export default {
getRecipes: function(query) {
return axios.get("/api/recipes", { params: { q: query } });
}
};
The relevant api route (/api/recipes) is located in a folder named "routes" outside of the "src" folder. This file is the only item inside the folder.
const axios = require("axios");
const router = require("express").Router();
/* As you can see, this sends the request to "recipepuppy.com" with the
relevant query ("milk").*/
router.get("/recipes", (req, res) => {
axios.get("http://www.recipepuppy.com/api/", {params: req.query})
.then(({data: {results}}) => {res.json(results)})
.catch(err => res.status(422).json(err));
});
module.exports = router;
Going even further out, here is the server.js file (outside of the "client" folder) that determines the routes:
const express = require("express");
const path = require("path");
const PORT = process.env.PORT || 3001;
const app = express();
const apiRoutes = require("./routes/apiRoutes"); // *********
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
app.use("/api", apiRoutes); // *********
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
app.listen(PORT, function() {
console.log(`API server now listening on port ${PORT}.`);
});
As far as I can tell, everything is set up perfectly. However, every single time I boot up the server, the browser console error pops up and says:
GET http://localhost:3000/api/recipes?q=milk 404 (Not Found)
Even though server.js directly ties to the apiRoutes folder, and the axios call within API.js calls the exact same route that would result from going to the /api route, then the /recipes route within /api (resulting in /api/recipes).
If anybody here can tell me what is going on and how to fix it, I would appreciate it.
I didn't have "proxy" set in my dependencies (package.json) in the client folder.
Once I set "proxy" to "localhost:3001" (the same as my initial server.js port value) and restarted the server, it worked immediately.
I am learning GraphQL using with React, but stuck at routing issue.
This is mostly from the express, App works fine on the home route "localhost:4000/", but other then this "localhost:4000/song" , I get 'Cannot GET /song' error.
Here's full code: Lyrical-GraphQL Demo
Here's my server.js file:
const express = require('express');
const models = require('./models');
const expressGraphQL = require('express-graphql');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const schema = require('./schema/schema');
const app = express();
// Replace with your mongoLab URI
const MONGO_URI = 'mongodb://XXX:XXX#ds123371.mlab.com:23371/lyricaldb';
if (!MONGO_URI) {
throw new Error('You must provide a MongoLab URI');
}
mongoose.Promise = global.Promise;
mongoose.connect(MONGO_URI);
mongoose.connection
.once('open', () => console.log('Connected to MongoLab instance.'))
.on('error', error => console.log('Error connecting to MongoLab:', error));
app.use(bodyParser.json());
app.use('/graphql', expressGraphQL({
schema,
graphiql: true
}));
const webpackMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.js');
app.use(webpackMiddleware(webpack(webpackConfig)));
module.exports = app;
You need to define routes and respective component to render. This can be of help,
https://gist.github.com/siakaramalegos/df4620c52e829f6107c75d5c3f0ad7f5
That's because the request is going to the server. The error you're seeing is from express server.
You'll need to add a handler in server.js to capture all other requests something like this
app.get('*', function(req, res) {
res.sendfile('path-to-your-index-html');
});
Infact, I think this post might be useful.
I solved the problem, actually the issue was not from the server side routing, it was confussion between HashRouter and BrowserRouter of react-router.
Currently I'm using HashRouter and it is working fine. For BrowserRouter, you need to set up all routes prooperly from the server side.
Thanks Community!
I have almost googled my fingers off trying to figure this out. It seems a lot of the existing info on connecting socket.io with React Native is outdated, or maybe I'm just interpreting things wrong?
I've managed to get the client-side connected (I'm getting the client console logs when I connect to my app). It seems to be the server-side that's giving me issues. Why is the data being emitted from the client not showing up as a log in my terminal? None of the related console.logs in my server.js are logging but the App.js console.logs are registering.
Edit: Here is my full App.js file:
import Expo from 'expo';
import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import store from './src/store';
import { Provider } from 'react-redux';
// window.navigator.useragent = 'react-native'; -> not necessary anymore?
const ROOT_URL = 'https://myherokudomain.herokuapp.com';
const io = require('socket.io-client/dist/socket.io');
const socket = io.connect(ROOT_URL);
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('example', (data) => {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
socket.on('disconnect', () => {
console.log('Disconnected from server');
});
export default class App extends React.Component {
render() {
// const MainNavigator = my react-navigation system
return (
<Provider store={store}>
<View style={styles.container}>
<MainNavigator />
</View>
</Provider>
);
}
}
Edit: Here is my full server.js file:
const config = require('./config/config');
const { mongoose } = require('./db/mongoose');
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT;
// ************ Include and use separate routes file
app.use(require('./routes/routes'));
// ************
//Cross-Origin resource sharing. cors library solves CORS problems.
app.use(cors());
//***********
/* Chat server code*/
// enabled heroku session affinity:
// see https://devcenter.heroku.com/articles/session-affinity
// to enable: heroku features:enable http-session-affinity
// to diable: heroku features:disable http-session-affinity
const socketIO = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = socketIO(server, { origin: "*:*" });
//********** */
io.on('connection', (socket) => {
console.log('A client just joined', socket.id);
socket.emit('example', { hello: 'world' });
socket.on('my other event', (data) => {
console.log(data);
});
socket.on('disconnect', () => {
console.log('User was disconnected');
});
});
server.listen(port, (err) => {
console.log(`started on port ${port}`);
});
module.exports = { app };
I am getting the console logs on the client side just fine (for instance, the "connected to server" and "hello: world" stuff is showing up when I open my app on expo. But I am not getting the server-side console logs.
What am I doing wrong - how do I get socket.io fully working with a deployed React-Native app?
I would really appreciate any help at all! I've been stuck on this forever.
I'm assuming all the code works, just not the logging since that's all you're asking about. The problem is Node doesn't output to your browser's console.
If it's deployed on heroku then you should see everything being logged there, otherwise you can use libraries like https://github.com/node-inspector/node-inspector to output to your browser.
You're not getting the server-side console logs because 1.) They're only logging on the server, and 2.) You're not emitting them, if you do actually want to send the data back.