Add graphiql explorer plugin in docs graphql api playground

[martmull]

trafficstars

Scope & Context

We want a graphql API explorer in https://docs.twenty.com/graphql like we have in https://api.twenty.com/graphql. It is indeed a really useful option

Current behavior

In https://docs.twenty.com/graphql we have:

Expected behavior

We want the query explorer plugin like we have in https://api.twenty.com/graphql

Technical inputs

Add @graphiql/plugin-explorer plugin to packages/twenty-docs/src/pages/graphql.tsx

[i-am-chitti]

@martmull Is this still a pending issue to be worked upon? I can see GraphQL explorer on both docs and main site.

[Jeong-Min-Cho]

@i-am-chitti It is still a pending issue indeed as I checked.

@martmull This issue can be done easily, but there are some catch-ups.

Problem

There were some lifecycle bugs in graphiql plugins, which includes @graphiql/plugin-explorer too. This has already been handled by graphqiql team.

Thus, I checked with an older version of @graphiql/plugin-explorer to proceed.

Current situation

Since it depends on graphiql library which Twenty uses "graphiql": "^2.4.7" This was released in May 2023 (https://www.npmjs.com/package/graphiql?activeTab=versions).

So, I tested with the @graphiql/plugin-explorer version of 0.1.20 which was also released in May 2023 (https://www.npmjs.com/package/@graphiql/plugin-explorer?activeTab=versions).

The result was not satisfying for me.

It throws an error that might be solvable, but I did not want to investigate further for two reasons.

1. Updating @graphiql/plugin-explorer will require another update the code in the future It is because that the usage of @graphiql/plugin-explorer has been changed by graphqiql team - Link

2. Also updating graphiql will break the app again It throws Attempted import error: 'useOperationsEditorState' is not exported from '@graphiql/react' (imported as 'u'). error.

Blocker

1. The version of graphiql in twenty-docs needs to be updated to a later version

Solution in the future

The screenshot above is done by updating graphiql to the latest and installed the lastest version of @graphiql/plugin-explorer.

You may check my commit in my branch

Branch

https://github.com/Jeong-Min-Cho/twenty/tree/3087-add-graphiql-explorer-plugin-in-twenty-docs

Commit

https://github.com/twentyhq/twenty/compare/main...Jeong-Min-Cho:twenty:3087-add-graphiql-explorer-plugin-in-twenty-docs

Now what?

1. We should wait for the blocker to be unblocked
2. Copy-paste my code or adapt my code to your commit
3. Create a pull request

[martmull]

Hey @Jeong-Min-Cho thank you for your very clear explanation. Do you see any breaking changes in the playground when updating graphiql to version 3.0.10? If no I might say we don't have any blocker to update graphiql version and add the Explorer plugin. @charlesBochet what do you think?

[Jeong-Min-Cho]

Hey @Jeong-Min-Cho thank you for your very clear explanation. Do you see any breaking changes in the playground when updating graphiql to version 3.0.10?

Hello, thanks for coming back to this. I personally do not see any breaking changes by updating it.

[martmull]

@Jeong-Min-Cho Seen with @charlesBochet, we would be glad to get your changes in our code base. Do you feel like creating a PR linked to that issue? Best

[Jeong-Min-Cho]

@martmull Of course, the pull request is up as you asked! 👍