[Graphiql Explorer Plugin] (Next.js) Cursor/Caret jumps when editing query manually

Is there an existing issue for this?

I have searched the existing issues

Current Behavior

When editing the query by hand when using the GraphiQL component together with the explorerPlugin passed in the props array, the cursor resets, and appears in the first line of the editor.
I'm currently implementing the plugin as stated in the README

Expected Behavior

The caret shouldn't jump to the beginning.

Steps To Reproduce

1. Clone https://github.com/crjm/graphiql-explorer-test
2. cd into cloned repo, `npm install`
3. `npm run dev`
4. Open Explorer plugin, trigger fields
5. Start typing directly into the editor
6. The caret will jump to the first line of the editor.

Module pattern

graphiql-umd
graphiql-esm
graphiql-commonjs

Environment

- GraphiQL Version: latest
- OS: Ubuntu 22.04
- Browser: Firefox
- Bundler: Next.js (Webpack 5)
- `react` Version: 18.2
- `graphql` Version: 15.8

Anything else?

No response

I can't replicate this in your repository or with StackBlitz. Are you able to take a screen capture to share?

I can't replicate this in your repository or with StackBlitz. Are you able to take a screen capture to share?

👋 seems to happen in StackBlitz as well. Recording below using Mozilla Firefox 106.0.4.

This doesn't happen when using plain react. Maybe it's realted to Next SSR nature and the fact that dynamic is being used here to force client-side rendering? https://github.com/crjm/graphiql-explorer-test/blob/main/pages/index.js#L6

recording.mp4

@jonathanawesome

@jonathanawesome just checking if you were able to reproduce 🙏

Yep, thanks...I see it now and you're probably right that it's related to the dynamic import.

I can get it to jump without interacting with the Explorer plugin, so that's not the issue.

Curious that we haven't had this reported before, I wonder if it has something to do with next 13.

Have you tried downgrading to next 12?

Have you tried with babel rather than with swc?

Thx for the quick reply Jonathan. It also happens in next 12. Regarding babel, we haven't tried that yet.

We'll keep doing some more tests

Here's a related conversation with a workaround.

Here's a related conversation with a workaround.

In our case we're using NextJS dynamic imports with without SSR capabilities as described here: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr. If my understanding is correct, it should be the same as the outcomes you've shared. This issue happens only when adding the explorer plugin, so I assume there must be something happening around how both libs are being bundled and initialized in the client-side when using Next.

I'm experiencing the cursor jump as well and I'm using neither NextJS nor SSR 😕 I am using the explorer plugin, though I saw the problem occur when I disabled it. One thing I think I noticed: when I removed the explorer plugin along with the code that keeps the user-typed query in state (this is needed for the explorer plugin, see https://github.com/OneGraph/graphiql-explorer-example/blob/master/src/App.js#L88) and sets that query as a prop on the GraphiQL instance, I couldn't reproduce the problem.

GraphiQL Version: 2.0.9
OS: Mac OS Ventura
Browser: Chrome
Bundler: Babel
react Version: 18.2.0
graphql Version: 16.6.0

seems like useState is not keeping up
turning off onEditQuery seems to stop the cursor jump
unfortunately this causes the explorer plugin checkboxes to not match subsequent manual edits in the editor, a somewhat less annoying bug

<GraphiQL
      fetcher={fetcher}
      query={query}
      // onEditQuery={setQuery}
      plugins={[explorerPlugin]}
    />

https://deploy-preview-3328--graphiql-test.netlify.app/webpack/

just tested in this URL and seems to be fixed here indeed.

@marcosnils

awesome to hear @marcosnils , thanks for checking it out for me. I will merge as #3330 as 0.3.0 releases of the plugins. it will cause breaking changes to the plugin implementations that will simplify plugin usage

@marcosnils

@marcosnils here is a version to test in your implementation, can you confirm it works in your implementation?

canary fix version:

@graphiql/plugin-code-exporter@0.3.0-canary-f3cc0782.0
CDN version: https://unpkg.com/browse/@graphiql/plugin-code-exporter@0.3.0-canary-f3cc0782.0/dist/index.umd.js

please follow these instructions to update your implementation with the new plugin signature.

@rrva @bkuzma @crjm try this fix version if/when you can!

[graphiql] fix #2859, graphiql plugin lifecycle bugs, simplify plugins (

this fix has been released as 0.3.0!

please note the changelog again, one slight naming convention tweak to code exporter plugin while we were making a breaking change.

if you are using the module from npm, the changelog instructions will help you, and the READMEs have been updated.

if you are using the CDN bundle path, follow the updated example for explorer plugin and/or for code exporter plugin

@acao

Awesome @acao

Have not tested yet, but this is a big one for us. It prevented explorer usage so we were stuck with using both v1 and v2 in parallel. v1 had explorer, v2 can send auth headers. Looking forward to use v2 for all use cases

@rrva

@rrva oh dear, yes we added the headers tab in graphiql@1.2 or so I believe, but you should be able to use the latest 2.x and the @graphiql/plugin-explorer@0.3.0 together without this bug now! let us know if there are still issues in your implementation and we can re-open, but this seemed to resolve the issue for several people using either the module or UMD builds

We're currently using the 3.0.6 version of GraphiQL and are still experiencing the issue. It seems to happen less often, though.

I'm closing this older Explorer integration report as superseded by GraphiQL v6's first-party Query Builder (#4352, #4228). The new builder is included by default and synchronizes with the active editor without the old Explorer integration.

Please try v6 using the Explorer migration instructions. If cursor jumps still occur with the v6 Query Builder, please open a fresh issue with a minimal reproduction and the package versions so we can investigate the current implementation.

Navigation Menu

Repository navigation

[Graphiql Explorer Plugin] (Next.js) Cursor/Caret jumps when editing query manually #2859

Is there an existing issue for this?

Current Behavior

Expected Behavior

Steps To Reproduce

Module pattern

Environment

Anything else?

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Graphiql Explorer Plugin] (Next.js) Cursor/Caret jumps when editing query manually #2859

Description

Is there an existing issue for this?

Current Behavior

Expected Behavior

Steps To Reproduce

Module pattern

Environment

Anything else?

Activity

jonathanawesome commented on Nov 3, 2022

marcosnils commented on Nov 3, 2022

marcosnils commented on Nov 7, 2022

jonathanawesome commented on Nov 7, 2022

marcosnils commented on Nov 8, 2022

jonathanawesome commented on Nov 8, 2022

marcosnils commented on Nov 8, 2022

bkuzma commented on Nov 21, 2022

davegariepy commented on Dec 11, 2022

5 remaining items

marcosnils commented on Jul 10, 2023

acao commented on Jul 10, 2023

acao commented on Jul 10, 2023

acao commented on Jul 11, 2023

rrva commented on Jul 11, 2023

acao commented on Jul 11, 2023

maarcingebala commented on Oct 25, 2023

trevor-scheer commented on Nov 1, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions