Introdução ao cliente GraphiQL
O Gato GraphQL fornece o cliente GraphiQL para interagir com o serviço GraphQL. Acesse-o clicando em "GraphiQL" no menu do plugin:
O GraphiQL permite compor queries GraphQL, executá-las e visualizar suas respostas:
Guia do cliente GraphiQL
Veja como usar o cliente GraphiQL para compor e executar uma query GraphQL.
Composemos a query GraphQL no painel do lado esquerdo:
O GraphiQL possui um realçador de sintaxe para a sintaxe GraphQL. Conforme começamos a compor a query, podemos perceber como o nome da operação, os colchetes de abertura e fechamento, os campos, os argumentos, as directives e os comentários têm cada um uma cor distinta, ajudando-nos a compreender a query:
Ao carregar pela primeira vez, o GraphiQL recupera os metadados do schema GraphQL via introspecção. Graças aos metadados do schema, a qualquer momento durante a composição da query, o GraphiQL sugere opções de autocomplete:
Também podemos navegar pelos metadados do schema através do Documentation Explorer. Para abri-lo, devemos clicar no botão "Docs":
O Documentation Explorer aparecerá no lado direito:
Ao clicar no nome do tipo GraphQL, o Documentation Explorer exibirá suas informações:
- sua descrição
- quais interfaces ele implementa
- a lista de todos os seus campos, incluindo:
- quais argumentos eles recebem
- seu tipo de retorno (no qual também podemos clicar)
- sua descrição
A qualquer momento, também podemos pesquisar e recuperar informações sobre qualquer elemento do schema:
Passar o mouse sobre qualquer elemento da query exibirá suas informações, e ctrl (ou cmd) + clique nele o exibirá no Documentation Explorer:
Clicando no painel "Query variables" na parte inferior, podemos compor variáveis para passar à query, como um mapa JSON de variable => value:
Para executar a query GraphQL, pressionamos o botão "Run", ou pressionamos ctrl (ou cmd) + enter:
A resposta GraphQL será exibida no painel central:
No painel superior, há diferentes add-ons para o GraphiQL:
Clicar em cada botão de add-on executará uma determinada ação:
- "Prettify" formata a query GraphQL
- "History" exibe a lista das queries anteriores mais recentes, e clicar em qualquer uma delas irá inseri-la no editor de queries
- "Explorer" abre o painel GraphiQL Explorer
O GraphiQL Explorer é um excelente add-on. Ele exibe a lista de todos os campos, e clicar neles os adiciona à query no editor, permitindo compor a query GraphQL de forma visual: