How to use GraphQL response as a variable in Javascript - javascript

I am new to GraphQL and I am have the query working as expected but I am having trouble working with the response.
Query
query {
all_assets(where: {title: "suppliestile-blt9607aa6a28539d2e.zip"}) {
items {
url
}
}
}
Calling Response
var jsondata = JSON.stringify(response.data);
console.log(jsondata);
This is giving me the following response
{"data":{"all_assets":{"items":[{"url":"https://assets.contentstack.io/v3/assets/blt15ad871ba49b8a41/blta52af33b959c061f/6352b5fb3bd922566d8d3f2d/suppliestile-blt9607aa6a28539d2e.zip"}]}}}
Essentially I would like to use the url value as a variable moving forward but I am having trouble extracting it from all of the nested objects and arrays does anyone have any advice to get me pointed in the right direction?

The answer won't differ because it's a Graphql request. It's just a response that you get through the request via response.data.
If you need to access specific object/property within the response , you need to use the index of the object, you can do
const url = response.data.all_assets.items[0].url;

Related

Javascript - VueJS - Array as Parameter to store information

I have created a method in VueJS that fetches data from an API and can accept different parameters that will make different API requests that retrieve different information.
this is the base method and its parameters:
getContents(url, requestType, collection, param = null)
However inside this method, there is a call to another method that will do the actual API fetch.
The thing is that no matter what the API Call is, the fetched contents will always be saved to the same hardcoded variable (in this case the variable this.contents ):
async goGetIt(url) {
try {
let res = await fetch(url);
this.contents = await res.json(); //in this line you should put your destination array where data will be stored.
} catch (error) {
console.log("The request returned the following error: " + error);
}
}
What I would like to implement is for me to be able to pass a pre-created array that would be passed as argument in this function: getContents(url, requestType, collection, param = null, **destinationArray**) and that would then be used as destination for the fetched data.. This would allow me to have several different API Calls Happening at the same time in the same View or Component and saving information to different arrays. Because if I do not implement it, everytime I have 2 different calls of the same method, all the info from the previous fetch will be replaced with the late method call's info.
Is this possible to do with javascript and VueJS?
thank you for your help.

Axios adds constant name as outline to JSON, how do I only send the body?

I'm trying to send a POST request to a REST API that I have created. The POST request is sent from a Reactjs application.
The JSON I want to send looks like this:
{
"name":"something"
}
My plan was to send it like this:
const json = {
"name" : "something"
}
Axios.post("http://localhost:8080/BackendWiki/api/brands/", {json})
.then(res => {
console.log(res);
console.log(res.data);
})
But when I do that the JSON that is sent looks like this:
{
"json"{
"name":"something"
}
}
an then the API can't process the request. Is there a way to only send the body of the constant? I know that I can send the request like this:
Axios.post("http://localhost:8080/BackendWiki/api/brands/", {"name":"something"})
.then(res => {
console.log(res);
console.log(res.data);
})
and that works, but I would like to send a bit more complicated JSON than just one hardcoded line. So, is there a good way to solve this?
{} is a new object.
{json} is a new object with a property named json that has the value of the variable of the same name.
If you don't want to wrap your data in a new object… don't.
Axios.post("http://localhost:8080/BackendWiki/api/brands/", json)
NB: The value of the json variable is an object. It doesn't get turned into JSON until somewhere inside the Axios library. You should probably give it a more descriptive name (such as brand).
Remove the {} wrapping your object reference. The data argument expects an object and json already is one.
note that is a poor choice of variable names since it is not actually json data which is a string data format
Axios.post("http://localhost:8080/BackendWiki/api/brands/", json)
By wrapping json {} in brackets, (in the Axios.post call), you are making a nested json object. Removing those should fix the problem.

Receive raw response data using axios

I am trying to receive the raw response data, not the response headers or body. As an example, an image here shows the tab where this data is found:
Now, I am trying to receive this data when making an HTTP Request using `Axios`. Is this even possible?
I have tried searching online for about 2 hours, as this was a huge problem I was facing. I tried other sites, including stack overflow, to get the correct answer. If possible, could you please answer my question if you know? Thanks in advance.
const axios = require('axios');
const url = 'https://old.reddit.com/api/login?user=username&passwd=password'
function axiosTest() {
return axios.post(url).then((r) => {
console.log(r)
})
}
I'm pretty sure you must access the data property in the response object r. Also - since you are using the reddit API - make sure you are providing api_type in the request url (api_type=json for instance):
const axios = require('axios');
const url = 'https://old.reddit.com/api/login?api_type=json&user=username&passwd=password'
function axiosTest() {
return axios.post(url).then((r) => {
console.log(r.data)
return r.data;
})
}
For anyone reading this: Just to clarify, the api_type parameter in the request url is specific to the reddit API and most likely won't work any other API.

How to get JSON array on client_JS from server_JS?

From nodeJS (with Express) I try to send JSON_array in response to client JS:
asksJsonArray = JSON.parse(fs.readFileSync("tasks.json", 'utf-8'));
app.get('/getArr', function (req, res) {
readJsonContent();
res.json(JSON.stringify(TasksJsonArray)); //sending JSON array to client_JS in response
});
On client-side I want to get it, but nothing receive:
$.get('/getArr').success(function(res) {
var currencyData = JSON.parse(res);
if (!currencyData.rates) {
// possibly handle error condition with unrecognized JSON response
alert("currency data not found!");
} else {
taskArr = currencyData;
}
})
So I always receive msg 'currency data not found!' ...
res.json already converts the data to JSON, so you don't have to do it manually:
res.json(TasksJsonArray);
I believe this will also set the appropriate headers, so on the client, you don't have to explicitly parse the JSON, jQuery will do it for you:
$.get('/getArr').done(function(currencyData){
if (!currencyData.rates) {
// possibly handle error condition with unrecognized JSON response
alert("currency data not found!");
} else {
taskArr = currencyData;
}
});
Please note that assigning the response to a free variable is not really useful since you won't know when it's "safe" to access the variable. You might want to have a look at How do I return the response from an asynchronous call? .
This may still not work since currencyData might be a value that does not have a rates property. To learn how to correctly access the data, have a look at Access / process (nested) objects, arrays or JSON.
Alter res.json(JSON.stringify(TasksJsonArray)); to res.send(JSON.stringify(TasksJsonArray));.

How to get objectId from Parse.com rest api in javascript

I am working on a project using Parse.com rest api and Ionic/angularjs.
When I issue a Post request, I would like to get the objectId from the Response body.
I can see that the objectId is included in the response in json format, but I can´t seem to extract it.
var signUp = new SignUp(signUpData);
var response = signUp.$save(); // using angularjs $resource
console.log(response);
When I log the reponse I get this in the console: Object { $$state: Object }
"Dotting" into $$state only returns a number.
Any help would be appreciated.
I never used Parse.com but if you are using $resource code below should works
var signUp = new SignUp(signUpData);
signUp.$save(function(response){
console.log(response);
});

Categories