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.

Tempo di lettura: 2 minuti
editor

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

In 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.

Hai trovato questo post interessante?Scopri chi siamo