[graphiql] Syntax highlighting breaks with .graphql as a function

[MPiland]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

When using amplify's graphql api capabilities, the syntax highlighting for anything past the graphql function stops working properly. See screenshot. You can see where the if after .graphql() is yellow instead of the purple like previous as well as the const following that if is white instead of navy blue.

Expected Behavior

This should affect graphql syntax, but not affect other highlighting after using a .graphql() function.

Steps To Reproduce

This is in VS Code Insiders 1.96.0 and I'm also using

Environment

• GraphiQL Version: N/A
• OS: Windows 11
• Browser: N/A
• Bundler: N/A
• react Version: 18.2.0
• graphql Version: N/A
• aws-amplify Version: 6.6.7

Anything else?

No response

[muchisx]

Happening to me too, I tracked down the commit

Here: https://github.com/graphql/graphiql/commit/e9fc21ab5f403a3e26cec555b29e5fb9db436838 by @kitten @acao the release was by you if I'm correct https://github.com/graphql/graphiql/pull/3540 ?

v1.3.4 works v.1.3.5 doesn't

[muchisx]

@acao any updates here? would love to update to the latest version

[tlabeeuw]

Just installed and got the same bug when using the Github Octokit GraphQL library. E.g. the following line has the same rendering bug:

const response = await client.graphql<Response>(graphql, { issue });

[muchisx]

Hi @acao , this is rending our ability to upgrade impossible as any code affected by the error is basically broken.

@kitten could you take a look at your code and see if you can find a fix? Or shed some light for someone to do a PR ?