DEV Community

Cover image for This GPT talks to your GraphQL server and will write your queries for you
Matt Kane
Matt Kane

Posted on

This GPT talks to your GraphQL server and will write your queries for you

I've built a GPT that can talk to your GraphQL server, learn the schema, then build queries that return exactly the data you need. If you have ChatGPT Plus you can try it here. Read on to see what it can do and how I built it.

GraphQL Guide: Helping you explore and query GraphQL APIs

Some people love GraphQL and some people hate it, but both the lovers and the haters will agree that writing a query can be frustrating. I'm a big fan of GraphQL: it lets me get just the data I need for a page or app without loads of API calls. However even with great tools like Graphiql, constructing complex queries can be very laborious and error-prone. I'm sure I'm not alone in trying to get ChatGPT or Copilot to build queries for me, with mixed results. The problem is that it doesn't know your real API, and tends to guess and confidently generate broken queries.

The newly-launched custom GPTs let us get around that, and it's worked far better than I could ever imagine.

How to use it

To use it, you first tell it about your server. You can let it know the sort of data you need, or you can start by just asking it to explore the API.

User: Help me build a product page using mock.shop/api. GPT: To build a product page using the Mock Shop API at mock.shop/api, we can query for details about products, their variants, and associated images. Below are the key GraphQL types and fields that you can use...

Once you tell it the data you need, it will help build a query.

A GraphQL query that shows lots of detail

You can then ask it to try the queries. If there are errors it can fix them.

GPT: It seems there was an error in the query related to the price field. The MoneyV2 object requires a selection to specify what data should be returned. Let me adjust the query to correctly fetch the price details.

It can then display the returned results, even showing images inline.

The query successfully retrieved information for the product "Frontpack" from the Mock Shop API. Here are the details

How I made it

Regular ChatGPT can browse the web and read docs, but it can't directly talk to APIs. This means that it tends to make mistakes when generating queries and can't easily correct itself. Now custom GPTs can use "Actions" that let them perform other tasks. I built an action that allows ChatGPT to contact a GraphQL server, get lists of available types, load a schema, and validate and run queries. By giving it direct access to the server it can be sure that the queries are correct and return exactly the data you need.

Tips

Because chats are persistent, you can keep one chat per server that you work with, and it will remember the schema. You can iterate on queries and add and remove fields. If you update the schema, just ask it to refresh and it will do so.

It supports authenticated servers too: just tell it your API token. Be aware that you will be pasting a plain text key into the chat. The action does not store or log the key or any of your data, and just uses it to execute your requests, but you do need to trust ChatGPT and me, so don't use it for anything critical.

Try it out and let me know what you think.

Top comments (1)

Collapse
 
flem100 profile image
Flemming Kentved

I think this GPT is amazing. I am planning on using it for our company. I generated a GraphQL api using chillicream.com/docs/hotchocolate/v13
and because all the tables are connected and those references are included in the api, GraphQLExplorer can read through the api and understand the connections between the objects. I need to teach it how I want it to behave, but it seems to learn and understand how I want it to work. That's very impressive!
One thing I am missing however, is the ability to incorporate this gpt, into our own custom gpt. That way, I would be able to share the things it has learned. I can use the @mention feature from our own GPT, but then the user has to mention the @GraphQLExplorer every time.