AI-generated GraphQL Schema and Fake backend

if you prefer to watch a vid demo instead of reading just click here

Looking for a springboard

For a while now we have seen data from both analytics and community feedback that GraphQL Editor has a pretty steep learning curve and a lot of users have trouble getting their projects off the ground. We've tried pretty much everything to remedy that:

youtube tutorials
detailed documentation with gifs
step-by-step guides
pop-up onboardings
interactive in-app tutorials

While that has had positive effects it still didn't satisfy a lot of users who wanted to get going right away without following tutorials or guides. While brainstorming someone floated the idea of creating an example project that would give users some basic view of what they can do. This made a lot of sense, but why stop at a generic project when we can use AI to tailor it to what the user needs?

AI-generated Docs

We actually were already working on utilizing Chat-GPT for generating documentation. While that will be a sweet feature (as nobody likes writing documentation) it's a bit more complicated and we're still working on it. That said, we have decided that giving new users a jumping-off point was a priority and more importantly a lot easier to implement. So while ai-generated docs are coming soon, we do have two new AI features to show off!

AI-generated schema

From now on, when starting a new GraphQL Editor project you will notice a new field with some sparkles. This is where you can enter your prompt and the AI will then generate a schema for your project based on what you have entered. It can be anything - a food delivery app or a twitter clone and the AI should give you a nice base schema to play around with.

Here's what I got after typing 'schema for a twitter-like app':

type User {
  id: ID!
  username: String!
  email: String!
  password: String!
  createdAt: DateTime!
  followers: [User!]!
  following: [User!]!
  tweets: [Tweet!]!
}

type Tweet {
  id: ID!
  content: String!
  createdAt: DateTime!
  author: User!
  likes: [User!]!
  retweets: [User!]!
  replies: [Tweet!]!
}

type Query {
  getUser(id: ID!): User
  getTweet(id: ID!): Tweet
  searchUsers(query: String!): [User!]!
  searchTweets(query: String!): [Tweet!]!
}

type Mutation {
  createUser(username: String!, email: String!, password: String!): User!
  deleteUser(id: ID!): User!
  createTweet(content: String!): Tweet!
  deleteTweet(id: ID!): Tweet!
  likeTweet(tweetId: ID!): Tweet!
  retweetTweet(tweetId: ID!): Tweet!
  replyTweet(tweetId: ID!, content: String!): Tweet!
}

scalar DateTime

schema {
  query: Query
  mutation: Mutation
}

Ai-powered fake backend

Additionally you can now go to the API section and test out your queries and mutations against a fake backend with AI-generated field values! The AI will provide mock responses automatically based on the information it can gather - so if your query is something like getUsers with fields of usernames and email addresses the mock backend will return faked responses for those fields with random names and emails and the same for anything from listMovies to getListofPizzaToppings and the like. We had used the popular FakerJS database for this for years but that had its limitations and more importantly, required the user to choose and click the type of value they wanted faked for each field. While handy that was only a small step from writing them in yourself in an array. Now all that happens automatically without requiring the user to do anything!

Here's the result I got for the searchUsers query:

{
  "searchUsers": [
    {
      "createdAt": "Wed, 27 Sep 2023 18:42:23 GMT",
      "email": "[email protected]",
      "username": "Chanel.Cummings"
    },
    {
      "createdAt": "Thu, 28 Sep 2023 07:48:07 GMT",
      "email": "[email protected]",
      "username": "Lexie.Langosh"
    },
    {
      "createdAt": "Wed, 27 Sep 2023 22:31:15 GMT",
      "email": "[email protected]",
      "username": "Johnathon_Krajcik"
    },
    {
      "createdAt": "Wed, 27 Sep 2023 20:31:03 GMT",
      "email": "[email protected]",
      "username": "Scot20"
    },
    {
      "createdAt": "Thu, 28 Sep 2023 00:13:46 GMT",
      "email": "[email protected]",
      "username": "Loren.Harris65"
    },
    {
      "createdAt": "Wed, 27 Sep 2023 23:01:56 GMT",
      "email": "[email protected]",
      "username": "Alysson.Heaney88"
    },
    {
      "createdAt": "Wed, 27 Sep 2023 16:35:04 GMT",
      "email": "[email protected]",
      "username": "Katheryn.Bednar0"
    },
    {
      "createdAt": "Thu, 28 Sep 2023 05:54:44 GMT",
      "email": "[email protected]",
      "username": "Lottie.Fay63"
    }
  ]
}

For fun or as POC

As you can see it's very easy to play around with. Our main hope is that with this users (especially new ones) will have a way easier time getting acquainted with the basic possibilities of the tool. Obviously that's just one use, it can also be pretty handy to show proof of concept for an app showing both the overall structure and possible query and mutation results. It also serves as a nice starting point as you can easily edit all the fields the AI has created for you - changing the schema to whatever fits your needs. The whole process is so simple it requires only a few clicks without writing or even knowing any code - so even non-coders can easily do it and show their idea for an application!