Summary

This pull request closes #3087 and introduces crucial updates to the GraphiQL environment within the twenty-docs package. Notable changes include the installation of @graphiql/plugin-explorer, an update to graphiql version 3.0.10, and the addition of default CSS for the newly added plugin.

Changes

1. Installed @graphiql/plugin-explorer.
2. Updated graphiql to the latest version, which is 3.0.10.
3. Added a default CSS for plugin-explorer.
4. Adapted the plugin-explorer CSS to useEffect because We load graphiql style using useEffect as it breaks remaining docs style as the comment said.
5. Applied Prettier.

Known issue

1. The input box of the query name is a little smaller than the name itself.

Screenshots

Before

Light mode

Dark mode

After

Light mode

Dark mode

Test

1. cd packages/twenty-docs
2. yarn
3. yarn run start
4. Navigate to http://localhost:5001/graphql
5. Insert the API token (You can generate one from Twenty API Keys).
6. Make sure you can see the GraphiQL Explorer tab on the left nav bar.
7. Play around to ensure there are no breaking changes (e.g., turn on/off dark mode, use explorer to create queries).

Additional Notes:

• Please review the changes thoroughly, especially the adjustments made for the @graphiql/plugin-explorer and the update to the latest GraphiQL version.
• The known issue regarding the input box size for the query name has been identified and will be addressed in another ticket.

Checklist:

• Code has been tested locally.
• No breaking changes observed during testing.