Usar GraphQL en aplicaciones web frontend

La manera en que esto funciona es que definimos un Esquema,

tambien permite crear entornos separado (dev, production)

¿Qué es Grafbase?

Grafbase es una herramienta de npm y a la vez un servicio Serverless para poder crear APIs de GraphQL en cuestion de minutos.

La idea es que crees un esquema de GraphQL y Grafbase se ocupe de crear todas las consultas y mutaciones automaticamente.

Inicializacion de Grafbase

npx grafbase init <NOMBRE_DEL_PROYECTO>

En nuestro caso por ejemplo:

npx grafbase init grafbase-tutorial
cd grafbase-tutorial

esto creara un esquema de ejemplo como este:

type TodoList @model {
  id: ID!
  title: String!
  todos: [Todo]
}

type Todo @model {
  id: ID!
  title: String!
  complete: Boolean!
}

para ejecutarlo:

npx grafbase dev

luego puedes entrar en el localhost:4000, y allí veras la documentacion de las Queries y mutacione, y poder ejecutar lo siguiente:

{
  todoCollection(first: 0) {
    edges {
      cursor
      node {
        id
        title
      }
    }
  }
}

Si revisas la documentacion veras todas las queries y mutaciones que ya estan creadas

@model

Grafbase usa custom directives del propio lenguaje GraphQL, para poder crear la API, por ejemplo si usas la directiva @model, este creará un CRUD del esquema, tambien grafbase añade sus propios tipos escalares como URL, y, o Comment.

type Post @model {
  title: String!
  url: URL! @unique
  comments: [Comment]
}

type Comment @model {
  message: String!
  post: Post
}

Ahora puedes ejecutar esta consula:

mutation {
  postCreate(input: {
    title: "some new post",
    url: "http://faztweb.com/some-new-post-2"
  }) {
    post {
      id
      title
      url
    }
  }
}

o tambien puedes crear con comentarios:

mutation {
  postCreate(input: {
    title: "some new post",
    url: "http://faztweb.com/some-new-post-5",
    comments: [
      {
        create: {
          message: "my first comment",
        }
      }
    ]
  }) {
    post {
      id
      title
      url
      comments (first: 1) {
        edges {
          node {
            id
            message
          }
        }
      }
    }
  }
}

Desplegar Proyectos

Finalmente podemos desplegar proyectos de Grafbase usando un repositorio de Github. si creas un commit rapido puedes usar estos comandos para subirlo a Github:

git init
git add .
git commit -m "first commit"
gh repo create grafbase-tutorial --private --source=.

Esto creara un repositorio privado con el nombre grafbase-tutorial

Luego crea una cuenta grafbase.com

Luego puedes usar un servicio como HTTPie para hacer consultas y acceder a tu API

mutation CreateNewPost($title: String!, $url: URL!) {
  postCreate(input: { title: $title, url: $url }) {
    post {
      id
      title
      url
      createdAt
      updatedAt
    }
  }
}