I am trying use an axios request to fetch data from github api, but for some reason _limit is not returning the limited number of results?
await axios.get(`https://api.github.com/users/freeCodeCamp/repos?_limit=10`)
.then(
(res) => {
console.log(res.data);
}
)
The following http request is working perfectly by limiting the results
https://jsonplaceholder.typicode.com/todos?_limit=2
Whereas the following http request is not limiting the data
https://api.github.com/users/freeCodeCamp/repos?_limit=2
What's the difference between the above two requests?
The _limit parameter you see in https://jsonplaceholder.typicode.com is specific to their json-server software.
From the Github REST API documentation, you want to use the per_page parameter
const { data } = await axios.get("https://api.github.com/users/freeCodeCamp/repos", {
params: {
per_page: 10
}
})
My general advice for using any REST API... always read the documentation specific to the resource you're consuming.
Sorting options for API results are limited to created, updated, pushed and full_name (default). If you want to sort by something else, you'll need to do that client-side, eg
data.sort((a, b) => a.stargazers_count - b.stargazers_count);
For GitHub, the correct property is per_page.
Just bear in mind that limiting results has nothing to do with Axios or any front-end tool. It is a backend implementation, and any backend developer is free to do it the way they want. Although there are some standards, such as cursor pagination.
In a real project, the backend and frontend developer would have a "contract" for how this would work, so both know how the property will work.
Related
I am implementing REST APIS using Express and Postgres. In an endpoint, I would like to first delete all the instances from a table by FK user_id, and then insert several new instances with the same user_id. I'm wondering which http method should I use in this case? Currently I use POST but I don't know if this is the appropriate way. It seems that using PUT also works fine.
router.post('/myTable', auth, async (req, res) => {
const client = await pool.connect();
try {
await client.query('BEGIN');
const { records } = req.body;
await client.query('DELETE FROM my_table WHERE user_id=$1', [req.user_id]);
for (i in records) {
await client.query('INSERT INTO my_table (name, user_id) VALUES ($1, $2)',[records[i], req.user_id]);
}
await client.query('COMMIT');
res.send();
} catch (error) {
console.log(error);
await client.query('ROLLBACK');
} finally {
client.release();
}
});
PUT is for creating/replacing the resource at the URI you specified.
So if a resource exists, it has a URI that client knows, and with a PUT request you are replacing what's there, PUT makes the most sense.
One great benefit of PUT over POST is that PUT is idempotent.
So if you are sending a PUT request to a /myTable endpoint, the implied meaning is that you are replacing myTable, and a subsequent GET request on that same endpoint would give you a semantically similar response of what you just sent.
If any of my above assumptions are wrong, chances are you'll want POST, which is more of a general catch-all method for making changes with fewer restrictions. The downside is that I think it's less obvious what the operation of a given POST request is without inspecting/understanding the body and you lose the idempotence benefit too.
Currently I use POST but I don't know if this is the appropriate way.
Rule #1: if you aren't sure, it is okay to use POST.
POST serves many useful purposes in HTTP, including the general purpose of “this action isn’t worth standardizing.”
It seems that using PUT also works fine.
In a sense, any method "works fine" at the origin server. HTTP defines request semantics -- what the messages mean. It doesn't constrain the implementation.
However, general purpose clients are going to assume that your server understands GET/HEAD/POST/PUT etc exactly the same way that every other web server understands them. That's a big part of the power of the REST architectural style - any standards compliant client can talk to any standards compliant server, and it just works. Furthermore, it continues to work exactly the same way if we stick any standards compliant cache/proxy in between them.
But if you respond to a PUT request with 204 No Content, then general purpose components are going to understand that to mean the same thing that any other server would return. Which is to say, your server is responsible if your deviation from the standard results in loss of property.
You can check the answers here for your reference. They are very well explained.
PUT vs. POST in REST
But since both could serve the same purpose and would only depend on your preference or requirements, I usually use post for creating a resource and put for updating one as a practice.
I am using vue-2.And want to do shallow query for firebase realtime database by fetching API.But While running on development server ,it shows CORS blocked. What should I do?
PS: I am also using vuefire
created(){
var apiUrl = 'https://console.firebase.google.com/u/4/project/enajori-45094/database/enajori-45094/data/Admin/Data%20Collection/Paying%20Guest';
fetch(apiUrl).then(response => {
return response.json();
}).then(data => {
console.log(data);
}).catch(err => {
console.log(err);
});
}
Cors error i am receiving
Firebase REST-Api only reacts to HTTPS-Requests. If your localhost doesen't have SSL enabled your requests will fail no matter what your try. The URI also need to end with the the table's name like something.json
And you realy should use the Firebase SDK - it's the smoother way.
It's entirely unclear to me why you would want to use a URL to the Firebase console to access the database. Console URLs are for human consumption, not for programs.
You should use the provided javascript SDK to access data. It will work around CORS issues for you automatically, and give you a much cleaner way to read and write data. If you can't use the SDK, you can always try the REST API. Just don't depend on those console URLs at all.
I am working on a web app using ReactJS in which I have created a form and stored the values of all the input fields into state of the app. That is, the state of my App.js file contains values of all the input fields created in Form.js file. I want the information stored in state to be passed on to the backend so that I can process a dataset based on it.
How do I add a functionality so that on clicking a submit button everything that's in my app state gets passed on to the backend- say to a text file, or in a json file.
Basically I want to search through a dataset (using Elasticsearch) based on the information provided by a user in the form (using ReactJS).
I am new to React so I don't have much knowledge. I have made the web-app but I need suggestions on how to pass the information that I obtain through the form to a backend so that I can do further work.
How do I add a functionality so that on clicking a submit button
everything that's in my app state gets passed on to the backend- say
to a text file, or in a json file.
You can make a request for data to use in your application using Axios OR Fetch API. You can consume REST APIs using two of the most popular methods known as Axios (a promise-based HTTP client) and Fetch API (a browser in-built web API).
The fetch() API is an inbuilt JavaScript method for getting resources from a server or an API endpoint. It’s similar to XMLHttpRequest
Axios is an easy to use promise-based HTTP client for the browser and node.js. Since Axios is promise-based, we can take advantage of async and await for more readable and asynchronous code. With Axios, we get the ability to intercept and cancel request, it also has a built-in feature that provides client-side protection against cross-site request forgery.
To know more you can refer this
Both these above methods, can be used to submit the data from your front end into the back end, so that the data is stored into the back end, and then you can perform several operations on it according to your requirement.
You can refer several blogs and documentation to know more about this:
Use axios to fetch data from an api in ReactJS
Fetch API for POST Request
Axios
Difference between Axios and Fetch API
Recently, I have also created an application, wherein I am integrating React with SpringBoot application.
In this Application. I have set up router and route, created and submit form, called GET, POST, PUT, DELETE request using axios (have also done with fetch API).
submitBook= event =>{
event.preventDefault();
const book = {
title: this.state.title,
author: this.state.author,
coverphotoURL: this.state.coverphotoURL,
isbnNumber: this.state.isbnNumber,
price: this.state.price,
language: this.state.language
};
const headers = new Headers();
headers.append("Content-Type", "application/json");
fetch("http://localhost:8080/rest/books",{
method:"POST",
body:JSON.stringify(book),
headers
})
.then(response => response.json())
.then((book) => {
if(book){
this.setState({"show":true, "method":"post"});
setTimeout(() => this.setState({"show":false}),3000);
}
else{
this.setState({"show":false});
}});
this.setState(this.initialState);
};
To view the full code, you can refer my Github Repository
You need to look into making XHR or using the fetch API (or axios) to make http requests to the backend API.
use axios for calling api urls that you have defined in the backend. you can watch a short tutorial on youtube to get familiar with the basics.
You may want to use Fetch API documented in MDN. It handles url request, including REST API to parse data over HTTP, e.g. JSON object etc.
In the code below my express server is handling a get request coming from a weather app. A function is called when the page initially loads to get the location. However, the api I am using, 'geolocation', uses a post request to get location data.
Is is unRESTful for me to be making a post request inside my get route like this?
router.get('/', function(req,res ){
axios.post(`https://www.googleapis.com/geolocation/v1/geolocate?key=${googleGeo}`, {
considerIp: "true",
})
.then((data) => {
return {'lat': data.data.location.lat, 'lng':data.data.location.lng }
})
.catch(error => {
console.log(error)
})
});
I wouldn't get hung up on the word post, especially when you're using someone else's API. What matters is that when someone makes a GET request, it should not mutate state. In your case, the API probably uses the POST method so that you don't need to stick the request object into the query string or perhaps due to size limits of GET requests. It's just getting geo data - not mutating state.
If it mutates state, it should be a POST, PUT or DELETE. If it's really read only, GET is always appropriate, regardless of the APIs you're calling underneath the hood.
As long as your API toward your client is RESTful in how it presents its resources, it shouldn't matter how you get/store/manage that data in the backend, at least as far as REST is concerned.
That said, don't forget to send a response (e.g. res.json({lat:..., lng:...})) instead of returning from your .then() handler, and to send an error status code (e.g. res.sendStatus(500)) in your .catch() handler.
I need a solution that makes a Firebase DB API call for multiple items based on keys and returns the data (children) of those keys (in one response).
Since I don't need data to come real-time, some sort of standard REST call made once (rather than a Firebase DB listener), I think it would be ideal.
The app wouldn't have yet another listener and WebSocket connection open. However, I've looked through Firebase's API docs and it doesn't look like there is a way to do this.
Most of the answers I've seen always suggest making a composite key/index of some sort and filter accordingly using the composite key, but that only works for searching through a range. Or they suggest just nesting the data and not worrying about redundancy and disk space (and it's quicker), instead of retrieving associated data through foreign keys.
However, the problem is I am using Geofire and its query method only returns the keys of the items, not the items' data. All the docs and previous answers would suggest retrieving data either by the real-time SDK, which I've tried by using the once method or making a REST call for all items and filter with the orderBy, startAt, endAt params and filtering locally by the keys I need.
This could work, but the potential overhead of retrieving a bunch of items I don't need only to filter them out locally seems wasteful. The approach using the once listener seems wasteful too because it's a server roundtrip for each item key. This approach is kind of explained in this pretty good post, but according to this explanation it's still making a roundtrip for each item (even if it's asynchronously and through the same connection).
This poor soul asked a similar question, but didn't get many helpful replies (that really address the costs of making n number of server requests).
Could someone, once and for all explain the approaches on how this could be done and the pros/cons? Thanks.
Looks like you are looking for Cloud Functions. You can create a function called from http request and do every database read inside of it.
These function are executed in the cloud and their results are sent back to the caller. HTTP call is one way to trigger a Cloud Function but you can setup other methods (schedule, from the app with Firebase SDK, database trigger...). The data are not charged until they leave the server (so only in your request response or if you request a database of another region). Cloud Function billing is based on CPU used, number of invocations and running intances, more details on the quota section.
You will get something like :
const database = require('firebase-admin').database();
const functions = require('firebase-functions');
exports.getAllNodes = functions.https.onRequest((req, res) => {
let children = [ ... ]; // get your node list from req
let promises = [];
for (const i in children) {
promises.push(database.ref(children[i]).once('value'));
}
Promise.all(promises)
.then(result => {
res.status(200).send(result);
})
.catch(error => {
res.status(503).send(error);
});
});
That you will have to deploy with the firebase CLI.
I need a solution that makes a Firebase DB API call for multiple items based on keys and returns the data (children) of those keys (in one response).
One solution might be to set up a separate server to make ALL the calls you need to your Firebase servers, aggregate them, and send it back as one response.
There exists tools that do this.
One of the more popular ones recently spec'd by the Facebook team is GraphQL.
https://graphql.org/
Behind the scenes, you set up your graphql server to map your queries which would all make separate API calls to fetch the data you need to fit the query. Once all the API calls have been completed, graphql will then send it back as a response in the form of a JSON object.
This is how you can do a one time call to a document in javascript, hope it helps
// Get a reference to the database service
let database = firebase.database();
// one time call to a document
database.ref("users").child("demo").get().then((snapshot) => {
console.log("value of users->demo-> is", snapshot.node_.value_)
});