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
}
}
}