I'm trying to use $transitions service instead of $stateParams like there for listening on state changing, but can't get state params. I'm using property of StateObject, but instead of getting for example {id: 123}, i got {id: e}, where e is a object in which i can't find a value. Anybody help with this ?
$transitions.onStart({ }, function(trans) {
console.log(trans.$from().params);
}
I noticed that trans.params() return "to" state params.
trans.$from().params will get you from state parameters declaration.
trans.params('from') will get you their actual values
Probably what you need is:
$transitions.onStart({ }, function(trans) {
console.log(trans.params('from'));
}
Please refer to documentation here
State params
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#params
Transition params
https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html#params
Related
I've never used GraphQL before so I am really lacking knowledge on how to go about this. I'm wanting to update product meta fields on Shopify and it appears this is the only way. What I've done so far is really fumbling...
My JSON is:
{
"input": {
"id": "gid://shopify/Product/749521178847",
"metafields": [
{
"id": "gid://shopify/Metafield/2223333",
"value": "Training Grounds"
}
]
}
}
I've minified this to:
{"input":{"id":"gid://shopify/Product/749521178847","metafields":[{"id":"gid://shopify/Metafield/2223333","value":"The Training Grounds"}]}}
And am then using an HTTP request to:
https://MYSTORE.myshopify.com/api/2021-10/graphql.json?query={"input":{"id":"gid://shopify/Product/749521178847","metafields":[{"id":"gid://shopify/Metafield/2223333","value":"The Training Grounds"}]}}
I get the error:
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
I don't know if any of this is correct. If it is, I don't know if ?query= is the right variable to pass it through on.
I recommend you start using Postman, thunder client, or similar to write your graphql queries first, you will learn a lot about how graphql works and the error msgs will be a lot more useful.
To easily connect with Shopify on this stage, go to a store and create a private app, now you can use this for authenticating your API calls.
After that the Shopify graphql works on POST, you can't write your request on GET mode.
It needs to be a POST and you are missing type of operation mutation in this case and what it is.
Postman has https://www.postman.com/lively-moon-541169/workspace/purego-apis/example/16545848-bf0d1589-09b1-4ec6-ba63-a65a56b500eb examples of how to do the calls which can help you.
Also you can check GraphiQL app on shopify to test all the queries before making the programmatic queries
Updating an existing metafield:
mutation {
metafieldsSet(metafields: [
{namespace: "YOURNAMESPACE", ownerId: "gid://shopify/Customer/CUSTOMER_ID", type: "single_line_text_field", key: "YOURKEY", value: "THIS IS NEW VALUE"}
]) {
metafields {
key
value
}
userErrors {
field
message
}
}
}
Creating new metafield:
mutation {
customerUpdate(input: {
id: "gid://shopify/Customer/CUSTOMER_ID",
metafields: [
{key: "newkey", value: "some value", type: "single_line_text_field", namespace: "some namespace"},
]
}) {
userErrors {
field
message
}
}
}
I'm using Gatsbyjs to build a blog and I can't use the onCreatePage API to pass data from my graphql query into page templates.
My query grabs data from Kentico Cloud and it looks like this.
{
allKenticoCloudTypeBlogPost{
edges{
node{
contentItems{
elements{
url_slug{
value
}
}
}
}
}
}
}
This is a valid query and it returns data that looks like this.
The problem comes in my gatsby-node.js file where I want to utilize this query to build out pages using my predefined template.
Specifically in the createPage method which looks like this.
result.data.allKenticoCloudTypeBlogPost.edges.map(({node}) => {
createPage({
path: `${node.contentItems.elements.url_slug.value}`,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.contentItems.elements.url_slug.value,
}
})
});
The error that displays is the following.
TypeError: Cannot read property 'url_slug' of undefined
gatsby-node.js:31 result.data.allKenticoCloudTypeBlogPost.edges.map
C:/Users/xxxx/Desktop/Marketing Repos/xxxx/gatsby-node.js:31:57
I decided to investigate doing a console.table on node.contentItems, as it appears as though the elements part is where it gets tripped up.
The result of console.table(node.contentItems) just before the createPage method is this.
It appears that node.contentItems has a member called url_slug rather than the elements member that I expected.
I thought I could then solve my problem by updating my createPage method call like so.
result.data.allKenticoCloudTypeBlogPost.edges.map(({node}) => {
console.table(node.contentItems);
createPage({
path: `${node.contentItems.url_slug.value}`,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.contentItems.url_slug.value,
}
})
});
But then I get an error saying
TypeError: Cannot read property 'value' of undefined.
I truly don't understand how I can do a table log and see the url_slug member, but then when I try to access it, it says that it's undefined. All while I know that my query is correct because I can run it in graphiQL and get back the exact data I expect.
Any help would be appreciated. Thank you.
In your query result, node.contentItems is an array, even though you're trying to access it as if it's an object:
path: `${node.contentItems.elements.url_slug.value}`,
^^^^^^^^
console.log(contentItems) // [ { elements: {...} }, { elements: {...} }, ... ]
I think your confusion probably stems from the way console.table display data. It's confusing if you don't already know the shape of your data. Your screenshot says, this object has 4 properties with index 0 -> 3 (so likely an array), each has one property called elements (listed on table header), which is an object with the only property url_slug.
I'm not familiar with KenticoCloud, but maybe your posts are nested in contentItems, in which case you should loop over it:
result.data.allKenticoCloudTypeBlogPost.edges.map(({node}) => {
node.contentItems.forEach(({ elements }) => {
createPage({
path: elements.url_slug.value,
context: { slug: elements.url_slug.value },
component: ...
})
})
});
Is there a reason you are wrapping node with curly brackets in your map argument?
You might have already tried this, but my first intuition would be to do this instead:
result.data.allKenticoCloudTypeBlogPost.edges.map(node => {
console.log(node.contentItems)
createPage({
path: `${node.contentItems.elements.url_slug.value}`,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.contentItems.elements.url_slug.value,
}
})
});
We are in the situation that the response of our GraphQL Query has to return some dynamic properties of an object. In our case we are not able to predefine all possible properties - so it has to be dynamic.
As we think there are two options to solve it.
const MyType = new GraphQLObjectType({
name: 'SomeType',
fields: {
name: {
type: GraphQLString,
},
elements: {
/*
THIS is our special field which needs to return a dynamic object
*/
},
// ...
},
});
As you can see in the example code is element the property which has to return an object. A response when resolve this could be:
{
name: 'some name',
elements: {
an_unkonwn_key: {
some_nested_field: {
some_other: true,
},
},
another_unknown_prop: 'foo',
},
}
1) Return a "Any-Object"
We could just return any object - so GraphQL do not need to know which fields the Object has. When we tell GraphQL that the field is the type GraphQlObjectType it needs to define fields. Because of this it seems not to be possible to tell GraphQL that someone is just an Object.
Fo this we have changed it like this:
elements: {
type: new GraphQLObjectType({ name: 'elements' });
},
2) We could define dynamic field properties because its in an function
When we define fields as an function we could define our object dynamically. But the field function would need some information (in our case information which would be passed to elements) and we would need to access them to build the field object.
Example:
const MyType = new GraphQLObjectType({
name: 'SomeType',
fields: {
name: {
type: GraphQLString,
},
elements: {
type: new GraphQLObjectType({
name: 'elements',
fields: (argsFromElements) => {
// here we can now access keys from "args"
const fields = {};
argsFromElements.keys.forEach((key) => {
// some logic here ..
fields[someGeneratedProperty] = someGeneratedGraphQLType;
});
return fields;
},
}),
args: {
keys: {
type: new GraphQLList(GraphQLString),
},
},
},
// ...
},
});
This could work but the question would be if there is a way to pass the args and/or resolve object to the fields.
Question
So our question is now: Which way would be recommended in our case in GraphQL and is solution 1 or 2 possible ? Maybe there is another solution ?
Edit
Solution 1 would work when using the ScalarType. Example:
type: new GraphQLScalarType({
name: 'elements',
serialize(value) {
return value;
},
}),
I am not sure if this is a recommended way to solve our situation.
Neither option is really viable:
GraphQL is strongly typed. GraphQL.js doesn't support some kind of any field, and all types defined in your schema must have fields defined. If you look in the docs, fields is a required -- if you try to leave it out, you'll hit an error.
Args are used to resolve queries on a per-request basis. There's no way you can pass them back to your schema. You schema is supposed to be static.
As you suggest, it's possible to accomplish what you're trying to do by rolling your own customer Scalar. I think a simpler solution would be to just use JSON -- you can import a custom scalar for it like this one. Then just have your elements field resolve to a JSON object or array containing the dynamic fields. You could also manipulate the JSON object inside the resolver based on arguments if necessary (if you wanted to limit the fields returned to a subset as defined in the args, for example).
Word of warning: The issue with utilizing JSON, or any custom scalar that includes nested data, is that you're limiting the client's flexibility in requesting what it actually needs. It also results in less helpful errors on the client side -- I'd much rather be told that the field I requested doesn't exist or returned null when I make the request than to find out later down the line the JSON blob I got didn't include a field I expected it to.
One more possible solution could be to declare any such dynamic object as a string. And then pass a stringified version of the object as value to that object from your resolver functions. And then eventually you can parse that string to JSON again to make it again an object on the client side.
I'm not sure if its recommended way or not but I tried to make it work with this approach and it did work smoothly, so I'm sharing it here.
I have below piece of code which I am using to call http request using iron ajax with polymer so passing the value of body and last-response using polymer properties.as we can see here we have requestBody polymer property in this we are returning no of values in requestBody all values are hardcoded like start and end and name under tag.
<px-vis-timeseries
width="1000"
height="250"
margin='{"top":30,"bottom":60,"left":65,"right":65}'
register-config='{"type":"vertical","width":200}'
selection-type="xy"
chart-data="{{ltuchartData}}"
series-config="[[LTUseriesConfig]]"
chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'
event-data='[{"id":"333","time":15697128,"label":"test"}]'
x-axis-config='{"title":"Time"}'
y-axis-config='{"axis1":
{"title":"Remaining","titleTruncation":false,"unit":"%"}}'>
</px-vis-timeseries>
<iron-ajax
id="Request"
method="POST"
content-type="application/json"
auto
url="/api/series/v1/points"
last-response="{{Data123}}"
body="{{requestBody}}">
</iron-ajax>
Polymer({
is: 'test-view',
behaviors: [GlobalsBehaviour],
properties: {
uri: {
type: String,
observer: '_uriChanged'
},
requestBody:{
type: Object,
value: function() {
return {
"start": 11111,
"end": 123333,
"tags": [
{
"name" : "/asset/India/rotor",
}
]
};
}
},
Data123:{
type: Object,
observer: '_formateData'
},
observers: [
'_uriChanged(globals.uri)'
],
_uriChanged: function(uri) {
this.set('requestBody.tags.0.name', uri);
this.$.Request.generateRequest();
}
Now Below are the queries with respect to above code .
I want to set end attribute value (which is defined in requestBody property value )dynamically based on the uri for that I tried like : this.set('requestBody.end', "1113444"); in _uriChanged, But it didn't work.
I want to pass this end attribute value dynamically in above px-vis-timeseries polymer component's property that is:
chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'
event-data='[{"id":"333","time":15697128,"label":"test"}]'
in above properties I want to pass end attribute value like :
in chart-extents at the place of "1619712" I want to pass "end" + 2*50000
in event-data at the place of "15697128" I want to pass "end" + 50000
for that also i tried like this chart-extents = '{"x":["dynamic" , {{requestBody.end}}] , ,"y":[0,100]}'
now I have set end attribute value in requestBody computed function that is (_getRequestBody) based on my requirement .Now my problem is I want to get this end attribute value in my another computed functio(n of _chartExtents that is (_getChartExtents) I want pass this end attirbute value (which we will get from request body ) to xDynamic (which is the attribute of chartExtents)
As I wanted to pass uri value in name attribute which is defined in requestBody property for that I am setting like
this.set('requestBody.tags.0.name', uri); in _urichanged callback which is working fine now my problem is while defining or declaring polymer property named as requestBody i dont want to pass any hardcoded value in name attribute for that i tried "name": "" and "name" : this.uri,and "name" : uri ,but not able to get value.
Note: uri is coming from another polymer component and in some case its coming from global set variable.
How can I declare name attribute value without passing any hardcoded value?
I want to set end attribute value (which is defined in requestBody property value )dynamically ...
Not a satisfactory answer, but it should work as Polymer does dirty checking. Polymer have sometimes trouble updating properties, but not in this case, so try to override dirty checking by nullifying the element first.
_uriChanged: function(uri) {
if (this.requestBody.start) {
var clonedObj = JSON.parse(JSON.stringify(this.requestBody);
clonedObj.tags.0.name = uri;
this.set('requestBody', {});
this.set('requestBody', clonedObj);
this.$.Request.generateRequest();
}
Again, this shouldn't be needed. I would most of all make requestBody a computed value instead of setting specific values,
properties: {
requestBody:{
type: Object,
computed: '_getRequestBody(uri)'
},
// Other properties, like uri
}
// Other javascript methods
_getRequestBody: function(uri) {
var defaultURI = 123333; // I would make this a property or add a default value to 'uri'
uri = (uri) ? uri : defaultURI;
return {
"start": 11111,
"end": uri, // Here's the change
"tags": [
{
"name" : "/asset/India/rotor",
}
]
};
},
Note that computed will run no matter if the properties (uri, in this case) are defined or not. Sometimes, the order of the properties are important when using event handlers (observers) so place those last in properties.
i want to pass this end attribute value dynamically...
chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'
You shouldn't pass variables like that but instead use something like chart-extents='[[myObject]]'; However, for this specific solution one of the keys depends on another variable (the object requestBody in this case).
chart-extents="[[_getChartExtents(requestBody.end)]]"
---
// Other javascript methods
_getChartExtents: function(xDynamics) {
return {"x":["dynamic",xDynamics],"y":[0,100]};
},
The _ before the method name is just a programming habit of mine, so I can see that the methods and properties aren't used by other elements.
as i wanted to pass uri value in name attribute which is defined in requestBody property for that i am setting like this.set('requestBody.tags.0.name', uri);
Just extend answer 1.
_getRequestBody: function(uri) {
var defaultURI = 123333; // I would make this a property or add a default value to 'uri'
uri = (uri) ? uri : defaultURI;
return {
"start": 11111,
"end": uri,
"tags": [
{
"name" : uri, // Here's the change
}
]
};
},
I'm a newbie on RoR (and Ruby). I need a little help about a json response (with Grape).
This is the sample:
{
events: [
{
'some data':'some data',
place_id: 1
}
]
}
Now this is the result of Events.all in Rails, but I want to make for each event a query for the place, to have more data instead only id. I'm sure that new lambda function can help me, but for now I have no idea about to make it. I'm trying without success...
Thanks in advance
UPDATE
Desired result
{
events: [
{
'some data':'some data',
place : {
id: 1,
name: 'Blablabla'
}
]
}
Consider using ActiveModelSerializers which allows you to define how your models should be serialized in a manner similar to ActiveRecord DSL (e.g. your problem would be solved by defining that event has_one :place)
:events => events.as_json(include: :place)
This is a useful for my problem. After add belongs_to, obviously.
from http://api.rubyonrails.org/classes/ActiveModel/Serializers/JSON.html