fix: GraphiQL IDE improvements for LocalWP and toolbar buttons#3486
Merged
Conversation
This commit addresses several issues with the GraphiQL IDE: ## URL Mismatch Fix (Closes #3483) - Added URL mismatch detection between the current page origin and the GraphQL endpoint - Automatically adjusts the endpoint URL to use the current origin when a mismatch is detected - This fixes the blank Query Composer issue when using LocalWP or similar tools where WordPress is configured for a custom domain but accessed via localhost with a port - Added helpful error messages when schema fails to load, including specific guidance for URL mismatch scenarios ## Apollo Client Authentication - Updated the Apollo Client to include credentials and X-WP-Nonce header for proper cookie-based authentication - This ensures introspection queries are properly authenticated ## Toolbar Buttons Fix (Fixes #3431) - Fixed Prettify and History buttons that were not working - Updated to use the proper @graphiql/react hooks (usePrettifyEditors, useHistoryContext) instead of deprecated class instance methods - Fixed ref handling in GraphiQL component to use proper React ref pattern ## Error Handling Improvements - Added schemaError state to AppContext for better error tracking - Improved error capture and display in Router component - Query Composer now shows meaningful error messages with troubleshooting guidance
- Added test to verify Prettify button formats unformatted queries - Added test to verify History button toggles the history panel - Tests ensure the toolbar buttons work correctly after the fix
- Remove unused queryBefore variable in prettify test - Remove unused historyPanel locator in history test - Remove unused isHistoryInitiallyVisible variable in history test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses several issues with the GraphiQL IDE that have been reported by users.
Changes
URL Mismatch Fix (Closes #3483)
http://mysite.local) but accessed via localhost with a port (e.g.,http://localhost:10003)Apollo Client Authentication
credentials: 'include'andX-WP-Nonceheader for proper cookie-based authenticationToolbar Buttons Fix (Fixes #3431)
@graphiql/reacthooks (usePrettifyEditors,useHistoryContext) instead of the deprecated class instance methods (handlePrettifyQuery,handleToggleHistory)useRef+ref={graphiqlRef})Error Handling Improvements
schemaErrorstate to AppContext for better error trackingTesting
Related Issues