Come fornire l’editor GraphiQL in Ruby on Rails
Esistono vari strumenti di sviluppo che permettono di interrogare un endpoint GraphQL. Ad esempio possiamo usare Postman, Curl e altri programmi. Uno dei metodi più interessanti è quello di utilizzare GraphiQL. Questa libreria JavaScript fornisce un editor testuale in grado di eseguire delle query sul nostro endpoint GraphQL, visualizzare i risultati con il testo formattato, visualizzare la documentazione e fornire altri accessori molto utili.
Questa guida vi mostrerà come inserire GraphiQL all’interno di una applicazione Ruby on Rails. Inoltre sfrutteremo Devise per limitare l’accesso all’editor agli utenti non autorizzati.
Esistono vari strumenti di sviluppo che permettono di interrogare un endpoint GraphQL. Ad esempio possiamo usare Postman, Curl e altri programmi. Uno dei metodi più interessanti è quello di utilizzare GraphiQL. Questa libreria JavaScript fornisce un editor testuale in grado di eseguire delle query sul nostro endpoint GraphQL, visualizzare i risultati con il testo formattato, visualizzare la documentazione e fornire altri accessori molto utili.
Questa guida vi mostrerà come inserire GraphiQL all’interno di una applicazione Ruby on Rails. Inoltre sfrutteremo Devise per limitare l’accesso all’editor agli utenti non autorizzati.
Requisiti
Per introdurre il nostro editor abbiamo bisogno di aver installato e configurato le librerie “webpacker” con React, “graphql” e “devise”. Se sei alle prime armi questo articolo può tornarti utile. Inoltre dobbiamo assicurarci che l'endpoint “/graphql” sia correttamente funzionante.
# Gemfile ... gem "devise" gem "graphql" gem "webpacker" ...
Let’s go! 🚀
Aggiungiamo alle nostre dipendenze JS: “graphiql”. “graphql” e “isomorphic-fetch”.
# package.json
{
...
"dependencies": {
...
"graphiql": "^1.0.3",
"graphql": "^15.3.0",
"isomorphic-fetch": "^2.2.1",
...
}
...
}Come per ogni applicazione Ruby on Rails abbiamo bisogno di: definire una rotta, aggiungere un controller e una vista.
Creiamo una nuova route:
# config/routes.rb ... get "/graphiql", to: "graphiql#index ...
Creiamo un nuovo controller con la sola index:
# app/controllers/admin/graphiql_controller.rb class Admin::GraphiqlController < Admin::ResourceController layout false def index end end
Tramite l’istruzione “layout false” stiamo esplicitando il fatto di non voler ereditare nessun layout configurato precedentemente (che sia di Admin o quello standard).
Creiamo la vista dell’index:
# app/views/admin/graphiql/index.html.slim
doctype html
html
head
= javascript_pack_tag "graphiql-editor"
= stylesheet_pack_tag "graphiql-editor"
body
#graphiql-editorIn questo modo stiamo dicendo al sistema di voler caricare il pack JS e lo stile con il nome “graphiql-editor”. Se questo nome non vi piace, ricordate di modificare anche il nome del file all’interno della cartella “app/javascript/packs”.
Aggiungiamo il componente React:
# app/javascript/packs/graphiql-editor.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import GraphiQL from 'graphiql'
import fetch from 'isomorphic-fetch'
const graphQLFetcher = async gqlParams => {
const data = await fetch(
`${window.location.origin}/graphql`,
{
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(gqlParams),
}
)
return data.json().catch(() => data.text())
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<GraphiQL fetcher={graphQLFetcher} />,
document.getElementById('graphiql-editor')
)
})Aggiungiamo lo stile:
# app/javascript/packs/graphiql-editor.sass @import '~graphiql/graphiql' body margin: 0 padding: 0 #graphiql-editor height: 100vh
Autorizzare la visualizzazione della pagina
Modifichiamo la nostra route nel seguente modo:
authenticate :admin do namespace :admin do get "/graphiql", to: "graphiql#index" end end
Conclusioni
Grazie a questo strumento abbiamo a disposizione in fase di sviluppo tutte le informazioni relative ad ogni endpoint e la funzione di autocomplete. Questo ci permette in poco tempo di interrogare o modificare la nostra base dati senza conoscerla a priori.
