I am using AWS Amplify's GraphQL API on my React Native app. I have an array of objects in my app like so:
const [data, setData] = useState([
{
id: someid,
thing: thing,
otherThing: otherThing
},
{
id: someid,
thing: thing,
otherThing: otherThing
}
]);
What would this need to look like in my schema.graphql? I currently have this defined like so:
type someThing #model {
UserID: String!
thingName: String
thingID: String! #primaryKey(sortKeyFields: ["UserID"])
data: [AWSJSON]
}
I'm currently getting this error in my app after calling createSomeThing mutation where I pass data: data as an input:
Variable 'data' has an invalid value. Unable to parse {id=8f3aa794-1881-4eaa-ba4e-0ac979b5b0a6, thing=pasta, otherThing=one} as valid JSON.
What's the issue here? Did I define this incorrectly in the schema.graphql? Or do I need to transform the data before passing into my mutation?
Solved by passing in data as a string, simply JSON.Stringify(data)
Related
Hy everyone !
I've stored a simple object in Async Storage in a ReactNative app.
But when I get it back, it isn't correctly parsed : all keys still got the quotes marks (added by JSON.stringify() when storing it) ...
I store data like that:
const storeData = () => {
let myData = {
title: 'Hummus',
price: '6.90',
id: '1'
}
AsyncStorage.setItem('#storage_Key', JSON.stringify(myData));
}
and then access data like that:
const getData= async () => {
const jsonValue = await AsyncStorage.getItem('#storage_Key')
console.log(jsonValue);
return JSON.parse(jsonValue);
}
and my object after parsing looks like that:
{"title":"Hummus","price":"6.90","id":"1"}
Any idea why quotes aren't removed from keys ??
That's because JSON specification says the keys should be string. What you are using is the modern representation of JSON called JSON5 (https://json5.org/). JSON5 is a superset of JSON specification and it does not require keys to be surrounded by quotes in some cases. When you stringify, it returns the result in JSON format.
Both JSON and JSON5 are equally valid in modern browsers. So, you should not be worries about breaking anything programmatically just because they look different.
You can use JSON5 as shown below and it will give you your desired Stringified result.
let myData = {
title: 'Hummus',
price: '6.90',
id: '1'
}
console.log(JSON5.stringify(myData));
console.log(JSON.stringify(myData));
<script src="https://unpkg.com/json5#^2.0.0/dist/index.min.js"></script>
Like this:
// JSON5.stringify
{title:'Hummus',price:'6.90',id:'1'}
// JSON.stringify
{"title":"Hummus","price":"6.90","id":"1"}
React native is having difficulties parsing JSON three levels deep. The object is structured like so:
data: {
post: {
user1: {
name: "user name"
}
}
}
data.post.user1 works fine and returns an object; however, when I try to get the name parameter react-native throws the following error:
undefined is not an object (evaluating 'data.post.user1.name')
Is this a known issue? I am getting data from response.json in a fetch call. EDIT: Object.keys(data.post.user1) returns the same error.
First, declare it in a variable and then make an object :
const data = {
date:{
post: {
user1: {
name: "user name"
}
}}}
Get the value like this :
<Text>{data.date.post.user1.name}</Text>
I have a Vue.js app running with a GraphQL backend, and Gridsome as the Vue.js boilerplate generator.
I'm trying to write a GraphQL query to only return the data of the logged in user, like this :
query Blah($test: String!) {
db {
settings (where: {user_id: {_eq: $test}})
{
key
value
}
}
with the $test variable defined here:
export default {
data() {
return {
test: "Va123",
user: null
};
}
}
But I get this error message:
An error occurred while executing query for src/pages/Profile.vue
Error: Variable "$test" of required type "String!" was not provided.
This is for a Girdsome page, not a template
It looks like the only way is to create pages programmatically using createPage() and pass the page context variable down the the page-query.
https://gridsome.org/docs/pages-api/#the-page-context
I need help for this kind of error when running this will happen object [] , []
Geocoder.getFromLatLng(28.6139,77.2090).then(
json => {
var addressComponent = json.results[0].address_components[0];
alert(addressComponent);
}, error => {
alert(error+"CATCH");
} )
It looks like you are trying to alert an object doing so usually results in getting the following response:
[object Object]
Which isn't really useful. You can solve this by using JSON.stringify
alert(JSON.stringify(addressComponent)) or alert(JSON.stringify(error))
Doing a reverse geocode lookup on the coordinates gives the following alert when I use JSON.stringify
You can read more about JSON.stringify here in the docs.
The JSON.stringify() method converts a JavaScript object or value to a JSON string
While using alert is useful, I prefer using console.warn as you would get something like this, which means you don't have to stringify every response
I'm using react js with mobx and I get data from api.
the data I get is array of objects.
when I set the data into mobx variable then I see array of proxy objects(not sure what the proxy says). I'm trying just to set the array of objects I get from api into mobx variable.
my store
class UserStore {
#persist #observable token = null
#observable tasks = []
#observable done = false
#persist #observable email = ''
constructor() {
}
#action
getTasks = async () => {
try {
let response = await Api.getTasks()
console.log('getTasks',response.tasks)
this.tasks = response.tasks
console.log('my new tasks',this.tasks)
} catch (e) {
console.log(e)
}
}
as you can see here in the first block('black') the data i get from api, then i set the respnse.tasks into this.tasks.
this.tasks = response.tasks
console.log('my new tasks',this.tasks)
You can convert proxy to JS:
import { toJS } from 'mobx'
// example
toJS(response)
It depends on how you want to observe the data.
"I'm trying just to set the array of objects I get from api into mobx variable"
is not really your end-goal.
If you want your observers to:
option a: react when the array reference change
= No care for values in the array.
Use #observable.ref tasks.
option b: react when the references of each value in the array change
= No care for the individual objects properties.
Use #observable.shallow tasks.
option c: react on the individual objects properties too
= Make everything observable, references and object properties
Use #observable tasks like you do.
Like indicated in the comments, mobx5 is using Proxy and some behaviour might differ compared to previous version.
More info: Mobx arrays, Mobx decorators, shallow observability
Note: you would need to give more details if this does not help you, like your react component code.
In my case, toJS was not working because I had a class with a variable with the type of another class. So, I needed to create new objects from the JSON:
parsedArray.map(
(a) =>
new MyObj1({
id: a.id,
myObj2: new MyObj2({
label: a.label,
}),
title: a.title,
})
);
If you run debugger, stop the debugger. It messes the mobx's flow.