Where can i find the graphiql explorer in Supabase?

Question

Do you know where and how can i use a graphiql explorer to to see my schema and do some graphql request with Supabase ?

Answer 1

You can use the GraphiQL to explore your schema and make requests.

You can also follow this quick-start guide (copied here).

Clone the repo:

git clone https://github.com/supabase/pg_graphql.git
cd pg_graphql

Then, launch the demo with docker-composer:

docker-compose up

GraphiQL will be available at http://localhost:4000/.

Answer 2

As of the Feb 2023 news release, there is now a GraphiQL editor in the dashboard. You can find it by clicking on the nav icon for API Docs (it's in shape of a document) or clicking the following link:

https://app.supabase.com/project/_/api/graphiql

From what I can tell, this editor isn't available in the self-hosted, Docker-based Supabase yet.

Answer 3

I will indicate a solution that worked for me and that should give you enough info to start.

Graphiql

There are many ways to use Graphiql. You should choose the one that is adequate to your case. More info in their repo

A quick way to test it is to use the online Graphiql app (built by hasura?).
Note that using it for exploring a little test project should be ok, but you should beware that you are using an online app that do not belong to you and giving it auth credentials.

URL and Header

The url should be in the form:

{your-app-url}/graphql/v1

You will also need to add at least a header apikey, the value which, i believe, should be the anonym public key that is found in your supabase project.

You might also need an authorization header (in my basic test i didn't test beyond that), if you want to access the API as a specific user. The value of the header should be a valid JWT for that user.

Note that the anonym public key is itself a JWT. You can view its content in https://jwt.io/

A good way to obtain the values for those headers is to get them from the API tab and the auto generated curl that it give you.
If you have any doubt about this, see this PostgREST video.

Or you could just construct the JWT yourself since you can get the secret in your supabase project. There should be many resources online that teach how to do it.

A practical example for an anonimous user:

You can use the normal anon-public-key for the apikey header. That means that with a project that has a fictitious anon-public-key= gdgdgdgdgdgd.jhygtgg the headers will have this form:

apikey: gdgdgdgdgdgd.jhygtgg

If everything is correct, you should see the documentation explorer on the right being auto populated with the graphql schema.

Answer 4

Would be a good idea to avoid Hasura's online editor as a precaution. There's a lightweight tool that our teams have been using.