Anyone called a GraphQL API with bubble?

[dan8]

Has anyone successfully implemented or interacted with a GraphQL API using bubble?

Is it possible out the box or not? I’m fine with REST but the API needed is GraphQL only (seems to be the way it’s heading)

[vini_brito]

Yes, the challenge is mostly building the query body.
But it’s just a normal HTTP request after all.

[tech6]

Can you please expand on this? I’m totally lost on how to get started.

[JayM]

You don’t happen to have an example?

[vini_brito]

Ah, I did it in a private custom plugin, but it is likely you can do it in the API Connector.
The query body you can build using any JSON building technique, you can search the forums for building JSON requests’ bodies.
Plus you can have as many different requests you want.

[JayM]

I don’t suppose you can make that plugin available by any chance?

[vini_brito]

Nope, and anyway it is very specific to the endpoint it interacts with.

[JayM]

ok thanks

[naile.titah]

Hey, I struggled quite a lot on that case and I think I can now help.

Here are the steps to follow when using GraphQL API with Bubble’s API Connector:

1. Use the playground of the GraphQL API to find the correct query you’re looking for

2. Click on COPY CURL at the top right

3. It should copy this kind of code:
curl 'https://api.sorare.com/graphql' -H 'Accept-Encoding: gzip, deflate, br' -H 'Content-Type: application/json' -H 'Accept: application/json' -H 'Connection: keep-alive' -H 'DNT: 1' -H 'Origin: https://api.sorare.com' --data-binary '{"query":"query {\n user(slug: \"ntfc\") {\n cardCounts{total}\n id\n nickname\n profile {\n pictureUrl\n }\n slug\n paginatedCards(rarities: [limited, rare, super_rare, unique]) {\n nodes {\n name\n age\n position\n rarity\n pictureUrl\n }\n }\n }\n}\n"}' --compressed

4. Go to the API Connector and configure an API Call of POST type. Add required headers of the call. Then, paste into the Body the part of the previous code starting with {"query and ending with "}

–
Special thanks to @arnaud.ledoeuff22 for the help!

[ervin]

What worked for me is put the Auth on header and build the query like so:
{“query”:"
{applicants{
applicant{
applicantId
}}}"
}

replace the apiKey and integrator key with your own.