Regex for graphQl not returning results when added to react component - reactjs

I was testing queries out with GraphiQl explorer, which returned the results I wanted using the a regular expression underlined in red below.
You can see it returns results and it generates the code for react in the far right of the screenshot. I was hopeful that it would work straight away with a copy & paste but apparently you have to escape the regex in the template literal string (Why doesn't the code explorer do that if you need to escape it anyway?)
Below are the results if you try to add the code the way its generated.
Through some googling & a GitHub issue I found that the regex needs to be double escaped.
See the update for the fix below. Link to regex PR
Added the change to my regex and it stopped the previous error.
But now its not showing any results..
Regex updated ->
No results ->
I've tried using variables to inject the original regex to the template literal string but no avail as apparently you can't do that with graphQl. Has anyone had this issue or care to share an idea/solution ?

Related

Remove extra brackets from JSON call in Integromat

I am running a HTTP call to bring back data in JSON format but this is bringing through an extra set of square brackets that is causing issues when i am trying to recognise the array. See screen shots.
I can remove the extra set manually in a JSON editor but need to try and find a way of doing this automatically as part of my call.
I am running the call through Integromat and have looked at using Regex but couldn't find the correct code combinations.
Any help or advise much appreciated.
You can use the replace function and insert the brackets that need to be found using regex pattern making sure you denote the bracket at the starting position and the bracket at the end of the string to be replaced with emptystring
Don't check "Parse Response" in HTTP Request module.
That way Data will be returned as long text
Use "Text Parser"'s "Replace", look for ^[|]$ and replace it with emptystring. Make sure you check "Global Match", otherwise it will only do to the first match only=[
3.Then just Parse Json from parsed(replaced) text
I think this article will help.
https://medium.com/#petr.hnilica/json-in-integromat-how-to-create-an-array-from-collections-with-the-same-structure-2991b985e03e

Uglifyjs unexpected token name error

Attached is an image of what I am receiving when I try to bundle my project for production. I am receiving a Unexpected token name <<Object>>, expected punc <<,>> message as shown in the image.
Terminal output of error
Not sure what the issue is but I have tried to use uglify-es and uglify-js and get the same error. I even attempted to make a simple app using es6+ code to see if uglify-js worked and it did. So some of the older threads on the internet mentioning that uglify-js won't handle es6+ code might be irrelevant now. I also read somewhere that the newest version (3.x) does support it but haven't been able to confirm that.
I would love to show some code but not sure what relevant piece of code I need to show. As per the image it also mentions the line, col, pos etc... but the code on that line does not start at the col number mentioned.
I will definitely update this post as I investigate but any tips or ideas would be great!
So the issue is now resolved after some thorough research. It looks like the line 1665 I was looking at in my non-optimised bundle app.js was not what I needed to look at (obvious since the column index was way off).
So instead I decided to output the bundle generated code that FuseBox was working on and it was in-fact different. This is the line I added in node_modules/fuse-box/quantum/plugin/BundleWriter.js inside the uglifyBundle function to output the content so I could read it clearly.
fs.writeFile('bundle.txt', bundle.generatedCode);
The output in bundle.txt that was the issue and my actual TypeScript code is shown here:
// bundle.txt line 1665
this.wholesalerSettings = [object Object]
// actual project code
constructor() {
this.wholesalerSettings = process.env.WHOLESALERSETTINGS;
this.API = this.setHostUrl();
}
So I took a look in my fuse.ts file and noticed I was not parsing the json object correctly.
public get wholesalerSettings()
{
const wholesaler = require(`./src/~/wholesalers/${this.wholesaler}/config.json`);
return JSON.stringify(wholesaler);
}
// then down in the environment plugin
EnvPlugin({
WHOLESALERSETTINGS: this.wholesalerSettings,
IMAGE_PATH: this.imagePath
}),
Once I parsed the object correctly with JSON.stringify it worked perfectly as process.env.WHOLESALERSETTINGS was now a JSON string instead of an Object.
First time I really dealt with devops stuff but was fun and at the same time highly stressful. I guess the main thing I learned is when you are dealing with tooling and third party tools (FuseBox uses uglify-js) then you need to take a closer look at the input that is being given to that tool rather than the output like I was at first.
UglifyJS says it sees Object where it's expecting a ,, so we can infer:
The code you wrote (or generated by some other tool right before uglifyJS processes it, e.g. babel? Though you probably don't use babel since your uglifyJS deals with es6 directly) is "Object" where the error occurs.
It's expecting a ,, so the error is occuring at some place like multiple variable declaration, let foo, bar, or object/array definition, [1, 2] {foo: 1, bar: 2}

How to use $header in routes

I'm creating a route using the Java DSL in Camel.
I'd like to perform a text substitution without creating a new processor or bean.
I have this:
.setHeader(MY_THING,
constant(my_template.replace("{id1}", simple("${header.subs_val}").getText())))
If I don't add 'constant' I get type mismatch errors. If I don't put getText() on the simple() part, I get text mismatch answers. When I run my route, it replaces {id} with the literal ${header.subs_val} instead of fetching my value from the header. Yet if I take the quotes off, I get compile errors; Java doesn't know the ${...} syntax of course.
Deployment takes a few minutes, so experiments are expensive.
So, how can I just do a simple substitution. Nothing I am finding on the web actually seems to work.
EDIT - what is the template? Specifically, a string (it's a URL)
http://this/that/{id1}/another/thing
I've inherited some code, so I am unable to simply to(...) the URL and apply the special .tof() (??) formatting.
Interesting case!
If you place my_template in a header you could use a nested simple expression(Camel 2.9 onwards) like in the example below. I am also setting a value to subs_val for the example, but I suppose your header has already a value in the route.
.setHeader("my_template", constant("http://this/that/{id1}/another/thing"))
.setHeader("subs_val",constant("22"))
.setHeader("MY_THING",simple("${in.header.my_template.replaceAll(\"\\{id1.?\",${in.header.subs_val.toString()})}"))
After this step header MY_THING has the value http://this/that/22/another/thing.
1)In this example I could skip to_String() but I do not know what's the type of your header "subs_val" .
2) I tried first with replaceAll(\"\{id1\"}\") but it didn't work with } Probably this is a bug...Will look at it again. That's why in my regex I used .?
3) When you debug your application inside a processor, where the exchange is available you can use SimpleBuilder to evaluate a simple expression easily in your IDE, without having to restart your app
SimpleBuilder.simple("${in.header.url.replaceAll(\"\\{id1.?\",${in.header.subs_val.toString()})}").evaluate(exchange, String.class);
Hope it helped :)

Silverlight: URL parameter in query string escaped

in Silverlight 5:
var uri= new Uri("http://www.last.fm/api/auth/?api_key=xyz&cb=http://localhost:19000/callback?bla=blu")
HtmlPage.Window.Navigate(uri);
lands my browser at:
http://www.last.fm/api/auth?api_key=xyz&cb=http://localhost:19000/callback%253Fbla=blu
Note how the "?" of the URL in the callback parameter gets escaped to %253F - even though, if I look at uri.ToString() in the debugger, it's not escaped.
How can I prevent that from happening?
Many thanks,
Max
I got no answer, but if anyone stumbles across the same issue, here's what I tried and what I finally did:
First, I attempted to use HtmlPage.Window.Eval() to execute javascript which would navigate to that URL. Again, the ? was escaped even though URL.ToString() didn't escape it.
So what I finally did - could have thought of it earlier, really ;P - was to change my callback handler to follow a REST like format. Instead of:
http://localhost:19000/callback?bla=blu
it now listens at:
http://localhost:19000/callback/bla=blu
and takes the parameter value out of the path. No question mark involved anymore, problem solved.

Sublime Text 2: Different language highlighting based on context? (a la Webstorm)

I was watching some videos on Egghead.io about AngularJS. The creator of the videos uses Webstorm (and, I believe, works for them). One feature I noticed is that he can set different syntax highlighting within different scopes or quotation marks. So, in code like the following (from an AngularJS directive)
return {
template: '<div>something</div>',
// ^^^ these guys ^^^
}
...he can get the inside of the quotation marks to highlight as HTML.
I use Sublime Text 2, and am fairly wedded to it. Is there an existing feature/plugin for Sublime that could handle a case like this? If not, is something like this technically possible using the Sublime Text 2 API?
I don't think it's built in, but it's certainly possible. I've been doing some work with graphviz and wanted to do something similar. Labels can be generated with html like syntax. Anyways, I played around with the .tmLanguage file and added a new pattern to match the context where html like entries were valid (I look for label = <). The patterns I used for the captures aren't that good, but it works for fine for me. This give me the following, which I think is similar to what you are looking for.
I don't know anything about AngularJS, so I can't help you with anything specific to that, but it is certainly possible. Note that in the image below, the last <table></table> are just to show that highlighting doesn't occur there.
Edit:
Forgot to include this in the original post, but here is my updated tmLangauage file. That first pattern is what I added(link). I used PlistJsonConverter to go from JSON to plist, then saved the file as .tmLanguage. Hope this helps.
#skuroda is right, I implemented #skuroda's code with an additional plugin to easily edit HTML within an AngularJS directive JS file. The result is HTML syntax highlighting within a directive JS file and additional functionality to remove string related delimiters while editing templates.... Sublime AngularJS HTML Template Plugin

Resources