Suppress GraphQL: Syntax Error in VS Code when using template string - graphql

FYI: There are a ton of other posts concerning GraphQL Syntax Error in VS Code. I read many of them, but did not find anything relevant to this. My apologies if I missed it in the similar questions.
Environment:
VS Code v.1.51.1
Windows 10 x64 19041
https://github.com/apollographql/apollo-tooling v.1.17.0
React Typescript Application
I have a component that uses the useQuery hook. The query is retrieved from another query and comes in via a variable typed as string In order for the useQuery to correctly use the graphql query, it has first has to be made into a DocumentNode for which I use gql from graphql-tag npm package. The resulting code snippet looks like:
...
const PREPARED_QUERY = useMemo(() => gql`${query}`, [query])
const data = useQuery(PREPARED_QUERY, queryOptions)
...
This is working code, but the Apollo GraphQL extension throws a warning on this line:
Syntax Error: Unexpected <EOF>.GraphQL: Syntax
I understand this is because it is checking the query string to ensure that it is properly formatted and it does not understand the template string "hack".
Questions:
Can this be silences with some form of ignore comment?
If not, Is there any way to form this to make this template string pass the syntax check?

Looks like a known issue with the vscode extension - without a known solution :) https://github.com/graphql/vscode-graphql/issues/137 .
Workaround
Since gql is just a function, you can call it directly, so that the extension won't try to parse it and stop complaining.
gql(query)
Explanation on why it works
If we take a look at tagged templates docs, we'll see that it's a regular function that takes the array of static string pieces as the first argument, and interpolated expressions as the remaining arguments.
So when we do
gql`some content`
it translates to the following function call:
gql(["some content"]) // a single argument, because there is no interpolations here
Also this gql function has special code inside that allows to pass a plain string as the first arg (probably to support old JS where no template tags existed)

Related

Question about weird behavior referencing a YAML pipeline resource using a variable for the pipeline resource name

I am experiencing weird behavior with YAML variables, parameters, and Azure pipeline resource references. The following shows the original implementation that works compared to my new implementation with a single line change that fails.
Working Implementation
Template A (makes a call to template B):
- template: Templates\TemplateB.yml
serviceBuildResourceName: resourceName
Template B (uses serviceBuildResourceName param to get pipeline run information):
$projectId = '$(resources.pipeline.${{ parameters.serviceBuildResourceName }}.projectID)'
$pipelineId ='$(resources.pipeline.${{ parameters.serviceBuildResourceName }}.PipelineID)'
Template B goes on to use the values in $projectId and $pipelineId (along with other values not listed here since it is irrelevant) to successfully retrieve information about the a pipeline run from the specific pipeline resource, serviceBuildResourceName. Note that all pipeline resources are correctly defined at the beginning yaml file for the pipeline. In this implementation above, everything works perfectly.
Failing Implementation
Template A (makes a call to template B):
- template: Templates\TemplateB.yml
serviceBuildResourceName: $(ServiceBuildResourceName)
Template B (uses serviceBuildResourceName param to get pipeline run information):
$projectId = '$(resources.pipeline.${{ parameters.serviceBuildResourceName }}.projectID)'
$pipelineId ='$(resources.pipeline.${{ parameters.serviceBuildResourceName }}.PipelineID)'
Note that the only difference is the following: instead of passing the hard-coded string into the serviceBuildResourceName parameter, I pass in a variable, which has the same value as before, resourceName. The variable is defined in an earlier template as such:
- name: ServiceBuildResourceName
value: resourceName
I feel it should still work the same, but I know get the following error in my pipeline run:
WARNING: 2023-02-12 15:52:29.5071 Response body: {"$id":"1","innerException":null,"message":"The value is not an integer.
$(resources.pipeline.resourceName.PipelineID)
I know that the variable is being correctly populated since the error message above contains "resourceName" in resources.pipeline.resourceName.PipelineID, as it should.
However, for reasons unknown to me, it now throughs an error. It seems like it doesn't recognize the pipeline resource, and instead recognizes it as a string.
Any help or insight here would be greatly appreciated, thanks!
As far as I can tell, this is because of how predefined variables work in YAML. Since resources.pipeline... is a predefined variable, it gets resolved at compile time. Thus, you can't use run-time defined variables like I am doing. Instead of resolving it as a predefined variable, it will get resolved to be a string at runtime.

Cypress test passes single form input field but ignores the following one(s)

I’m trying to test a Stripe form with 3 input fields in Cypress. I found an example that works to test a single input that takes all the payment info (https://medium.com/#chipomapondera/hi-michael-98e432948028).
My version passes on inputting the CC but fails on the next input(s). My code is below:
it('checks user can support the Creator', () => {
cy.get('button[class="buttons__FollowButton-sc-10ti9z2-0 huoUmA"]').click()
cy.wait(4000)
cy.get('body')
.should('contain', 'Join this community')
cy.get('button[class="styledComponents__SubscribeButton-g42pit-3 kUgWbq"]').click()
cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242')
.getWithinIframe('[name="exp-date"]').type('1232')
.getWithinIframe('[name="cvc"]').type('987')
})
It doesn’t seem to like the following after it has typed the card number:
cy.getWithinIframe(‘[name=”exp-date”]’).type(‘1232’)
cy.getWithinIframe(‘[name=”cvc”]’).type(‘987’)
The error I receive is:
cypress error
I could see a typo in the type field where there are no ending single quotes at this line of test .getWithinIframe('[name="exp-date"]').type('1232). Could you please try following .getWithinIframe('[name="exp-date"]').type('1232') or may be try without quotes .getWithinIframe('[name="exp-date"]').type(1232)
I followed the medium article you shared and ran into the same issue as you. The cause of this problem is of course that stripe is creating multiple iframes and the method created in the article is just getting the first iframe.
So a very simple solution is to pass the id of the div containing the iframe to our getWithinIframe function. The function will now look like this:
Cypress.Commands.add('getWithinIframe', (iframeSelector, targetElement) =>
cy.get(`#${iframeSelector} iframe`).iframeLoaded().its('document').getInDocument(targetElement));
And call it like so:
cy.getWithinIframe('cardNumberElement','[name="cardnumber"]').type(1212123);
Hope this helps anybody who is facing the same issues.

JSON_HEX_AMP option required for Laravel LengthAwarePaginator->toJson() when used as Vue.js component prop?

Here's the super short version of what's happening, as far as I can tell. Debugging this has been a pain, and I'm not sure if this is a Laravel issue or a Vue.js issue (leaning toward Vue.js). Here goes...
I'm using a LengthAwarePaginator object to retrieve data to pass to a Vue.js component as a property. (This is unorthodox, and I plan to convert it to a fetch() method in the component when I have a proper API set up.)
<my-component :items="{{ $paginator->toJson() }}"></my-component>
When my $paginator data contains an item with a string field that contains " -- e.g. Plumber cut pipe 4" from end -- Vue.js completely fails to render my component.
However, if instead of " the field uses a raw ", everything works just fine -- e.g. Plumber cut pipe 4" from end.
I was alerted to this issue by a Vue.js parse error: avoid using JavaScript keyword as property name: "for" in expression .... I believe I received this error because of subsequently broken syntax that made a string use of 'for' look like a property name.
It's almost like Vue.js is double-converting the resulting &quot; to " when it reads the property, and the resulting extra " turns string data into a property name. This makes no sense though, since the raw " allows proper parsing.
My work-around, while I try to understand why this is even broken at all, has been to assign my property like this:
<my-component :items="{{ $paginator->toJson(JSON_HEX_AMP) }}"></my-component>
Does anyone understand why this is happening? Why is this an unsafe string in this context: Plumber cut pipe 4" from end ???

Cannot call .Count() IEnumerable extensions from lua script using nula

So I have a little lua script where I want to call an extension method on IEnumerable collection.
require ''CLRPackage''
import ''System.Collections.Generic''
import ''System.Linq''
import ''My.Namespace.Containing.AudioMarker''
local audioMarkersWithOffset = GetAudioMarkers();
local numberOfMarkers = audioMarkersWithOffset.Count();
So GetAudioMarkers() is a C# method returning an IEnumerable of AudioMarker objects. Doing a luanet.each will work fine and I will be able to iterate to every element of the collection. But I need the count of that collection and calling .Count() does the following error:
NLua.Exceptions.LuaScriptException: [string "chunk"]:54: attempt to call field 'Count' (a string value).
By the way, I know that with nlua you don't need to pre-register your types to used them so I try with and without the last import about AudioMarker, but got the same result.
I'm probably doing something wrong but I cannot seem to find any documentation on the web that could help regarding this issue.
I have been trying to use the IEnumerable<T>.ToList() extension method myself, but testing reveals that NLua has some problems with generic methods.. Calling a method of the form void func<T>(<T> arg) is possible if you register it as a lua function (Lua.RegisterFunction), but if you try to call the same method on an object present in lua state, you get the "attempt to call method..." error. Also, a method of the form void func<T>(IEnumerable<T> arg) will fail in both cases with a NullReferenceException and the "attempt to call method..." error, respectively.
Another point is, if you want to call C# extension methods from Lua, you need the ":" syntax, not "." (see the NLua "TestExtensionMethods" unit test).

cfajaxproxy is sending invalid parameters?

For some reason that I don't understand, on my development machine can't call to function of a cfc component from a cfajaxproxy.
In my cfm document:
<cfajaxproxy cfc="#Application.CfcPath#.empleado"
jsclassname="ccEmpleado">
This works, and also I can instantiate an object to get all the functions of that cfc component:
var cfcEmpleado = new ccEmpleado();
But, when I try to call a function of that object:
var nb_Empleado = cfcEmpleado.RSEmpeladoNombreBIND(1,1);
Debug complains:
Error: The ID_EMPRESA parameter to the RSEmpeladoNombreBIND function is required but was not passed in.
I got this from Network tab on Chrome and figured out that something is generating an invalid parameter:
http://127.0.0.1/vpa/componentes/empleado.cfc?method=RSEmpeladoNombreBIND&_cf_ajaxproxytoken=[object%20Object]&returnFormat=json&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=41C92098C98042112AE2B3AAF523F289&_cf_rc=0
As you can see, there's a parameter [object%20Object], that is messing around my request, and that's why it fails. I don't why is happening this. Other people has tested this, and it works, but in mine doesn't.
I have Coldfusion 9, Apache, Windows 8. Is is some configuration issue on Coldfusion, or a bug?
I can't tell if this is your error or not, but it might be. This was a problem that we had for awhile. You should consider using explicit names to avoid any confusion. Add the "js" in there.
<cfajaxproxy cfc="cfcEmpleado" jsclassname="proxyEmpleado">
var jsEmpleado = new proxyEmpleado();
I will try to find a link to an article about this very thing.

Resources