The old IDE features a classic white background. It uses a light color scheme that provides high contrast with dark text, which can be easier to read under certain lighting conditions but can get really hard on the eyes or glare over long periods. <\/p>\n\n\n\n
The layout has sections defined for the query composer, exposing all the data you have in WordPress, the query editor, and the response output. It also has a docs button to expose further documentation needed within the plugin, a history button that enables you to see your past created queries, and a button for screen enlargement.<\/p>\n\n\n\n
The New WPGraphQL IDE<\/h2>\n\n\n\n The new WPGraphQL IDE is a great addition for developers using WordPress with the WPGraphQL plugin. Its feature-rich and visually appealing interface significantly enhances the user experience.<\/p>\n\n\n\n
Aesthetics \ud83d\udc68\u200d\ud83c\udfa8<\/h3>\n\n\n\n Upon downloading the WPGraphQL IDE plugin, you will notice you have an option at the top of your screen between the old and new versions:<\/p>\n\n\n\nThe plugin allows you to choose between the two IDEs with a simple click. This comes in handy when you want to roll back to using the old version without having to do any heavy lifting. In the next version, the WPGraphQL team will move this to the settings section so one is hidden and the other is exposed.<\/p>\n\n\n\n
This is what the new version looks like when you click and choose it:<\/p>\n\n\n\nThe first feature to notice is the new dark theme, which gets me super stoked!!! Utilizing shades of dark blue and gray, this theme is less straining on the eyes, particularly beneficial in low-light conditions. This makes it an excellent option for those spending extended hours coding. Moreover, dark mode not only reduces eye strain but also provides the interface with a modern and sleek appearance, significantly enhancing the aesthetic user experience.<\/p>\n\n\n\n
The new IDE maintains a similar layout but improves visual separation through the use of color contrasts and shaded panels. This helps in distinguishing between different sections of the interface more clearly.<\/p>\n\n\n\n
Enhanced typography with better spacing and font choices is implemented, contributing to a more pleasant visual and reading experience.<\/p>\n\n\n\n
Features of the WPGraphQL IDE<\/h2>\n\n\n\n The new features in the IDE are more stylized with great-looking icons and button designs. Let\u2019s dive into what they do and the capabilities of each.<\/p>\n\n\n\n
All Access IDE Drawer \ud83d\ude80<\/h3>\n\n\n\n One convenient feature (And one of my favorites of this) the new WPGraphQL IDE contains is the IDE drawer.\u00a0 You have access to the IDE on every page of the WP admin, the block editor UI, as well as the actual public-facing site.\u00a0 All you need to do is just click on the rocket emoji \ud83d\ude80 next to the GraphQL IDE option on the toolbar. \u00a0 It is exposed anywhere the WP Admin bar is present.\u00a0 This will get ya\u2019ll stoke to not have to go back into the actual IDE page and just access it anywhere!Open Settings Dialog \u2699\ufe0f<\/h3>\n\n\n\n On the bottom left-hand corner of the IDE, you have a cog icon. When clicked, it will reveal your settings:<\/p>\n\n\n\nThe 3 settings you can control from this card are: <\/p>\n\n\n\n
\nPersist headers<\/code> – This setting allows you to save custom HTTP headers across sessions. Turning it “On” will retain headers like authentication tokens when the IDE is reloaded. It’s recommended to use this feature only if you trust the device you’re working on, as retaining sensitive headers can pose a security risk if accessed by others.<\/li>\n<\/ul>\n\n\n\n\nTheme<\/code>-This provides options to adjust the visual theme of the IDE interface to either match the system theme automatically or explicitly set it to a light or dark theme. This helps customize the look of the IDE according to your preference or environmental conditions (e.g., using dark mode at night to reduce eye strain).<\/li>\n<\/ul>\n\n\n\n\nClear storage<\/code> – This action removes all locally stored data in the IDE, such as cached responses, saved queries, and headers. It’s useful for starting fresh or troubleshooting issues related to corrupted or outdated local data.<\/li>\n<\/ul>\n\n\n\nShort Keys \ud83c\udf4f<\/h3>\n\n\n\n When you click on the command icon, you will see a card with a cheat sheet for your short keys to shortcuts for certain functions.<\/p>\n\n\n\nCmd + F<\/code>: Search in editor\u2014This shortcut opens a search input on the page, allowing you to type what you are looking for in the editor, as the image shows below.<\/p>\n\n\n\nCmd + K<\/code>: Search in documentation\u2014This shortcut opens a search input when you are in the Docs pane, allowing you to quickly type and find the specific document you are looking for.<\/p>\n\n\n\nCmd + Enter<\/code>: Execute query\u2014This shortcut allows you to execute the query you created in the query pane to get the JSON response.<\/p>\n\n\n\nCtrl + Shift + P<\/code>: Prettify editors\u2014This shortcut allows you to automatically format the code written in the query editor to make it more readable and aesthetically pleasing. It ensures that your indentation, spacing, and line breaks are clean and enhances readability. The previous image shows a query that was prettified. <\/p>\n\n\n\nCtrl + Shift + M<\/code>: Merge fragment definitions into operation definitions. In GraphQL, fragments are reusable pieces of query logic that can be included in multiple query or mutation operations. They help avoid redundancy in your codebase, making your queries easier to read and maintain. <\/p>\n\n\n\nWhen you use this shortcut, the WPGraphQL IDE automatically integrates all the fragment definitions you have created into the main operation in which they are used. The merge will identify all fragments and integrate and merge these fragments directly into the operation\u2019s definition, replacing the fragment spread with the actual definitions. This helps in viewing or debugging the operation as a single cohesive unit without the need to look up fragment definitions.<\/p>\n\n\n\n
A sample fragment:<\/p>\n\n\n\n
PostFields<\/code> fragment directly into your query, replacing the fragment spread with the actual defined fields in the fragment.<\/p>\n\n\n\n
Ctrl + Shift + C<\/code>: Copy query\u2014This is a quick way to copy your query and paste it in your front end or wherever you want to paste it.<\/p>\n\n\n\nCtrl + Shift + R<\/code>: Re-fetch schema using introspection \u2014 A quick way to re-fetch the GraphQL IDE\u2019s schema and keep it current.<\/p>\n\n\n\n Prettify, Copy, and Merge<\/em> shortcuts also are available to you in the middle query pane as an icon pointed out in this image:<\/p>\n\n\n\n
Notice the last icon, which is a link. This feature allows you to share the actual query document page with an authenticated user in your WP Admin. It’s awesome when collaborating with your team.<\/p>\n\n\n\n