Softonic

Construtor de Consultas GraphQL

Etapa 1 / 2
Argumentos
Criar consulta

Escrever uma operação GraphQL manualmente significa manter chaves, argumentos e indentação em ordem. Este construtor monta o documento para você: escolha consulta, mutação ou assinatura, dê um nome à operação, defina o campo raiz, adicione argumentos e liste os campos necessários. O resultado é uma operação formatada pronta para colar no Apollo, urql ou GraphiQL.

Como construir uma operação GraphQL

  1. 1

    Escolha o tipo de operação

    Selecione consulta, mutação ou assinatura no menu suspenso. Isso define o tipo de operação que o servidor executa.

  2. 2

    Dê um nome à operação

    Dê um nome como GetUser para que o servidor possa registrar e armazenar em cache. O nome é opcional; o construtor funciona sem ele.

  3. 3

    Defina o campo raiz

    Digite o campo que deseja chamar, por exemplo user, createPost ou orderUpdated.

  4. 4

    Adicione argumentos

    Adicione pares chave-valor como id: "123" ou id: $id. Linhas com chave vazia são ignoradas.

  5. 5

    Liste os campos e copie

    Digite um campo por linha, construa a consulta e copie o documento formatado para a área de transferência.

Trabalhando com documentos GraphQL

Um documento GraphQL é um conjunto de uma ou mais operações mais quaisquer fragmentos que elas referenciam. Cada operação nomeia um campo raiz do tipo Query, Mutation ou Subscription, e o servidor resolve o conjunto de seleção que você solicita. O construtor escreve o texto da operação para você, mas não conhece o seu esquema, então confira cada nome de campo e de argumento com a sua API antes de executar a operação.

Anatomia da operação

Parte Propósito Exemplo
Tipo de operação Consulta, mutação ou assinatura query, mutation, subscription
Nome da operação Usado para cache e logs GetUserById
Argumentos Valores passados ao campo raiz user(id: "123")
Conjunto de seleção Campos e seleções aninhadas { user(id: "123") { name posts { title } } }
Variáveis Entradas tipadas declaradas com o nome da operação query GetUser($id: ID!) { user(id: $id) { name } }

Armadilhas comuns

  • Variáveis obrigatórias terminam com !. Esquecer isso em argumentos marcados como NonNull no esquema produz um erro de validação antes que o resolvedor seja executado.
  • Argumentos de texto precisam de aspas. Um valor como 123 é um número; um valor de texto deve ser escrito "123" com aspas duplas dentro da linha de argumento.
  • Tipos de união e interface requerem fragmentos inline ... on TypeName para ler campos específicos de tipo.
  • Alias é obrigatório quando você solicita o mesmo campo duas vezes com argumentos diferentes, por exemplo today: stats(period: DAY) e week: stats(period: WEEK).
  • Conexões (especificação Relay) expõem edges { node { ... } } e pageInfo { endCursor hasNextPage }; pular qualquer um deles quebra a paginação.

Dicas

  • Mantenha operações pequenas e nomeadas para que o Apollo Client possa armazená-las em cache individualmente.
  • Passe valores que mudam como variáveis em vez de literais, assim o servidor analisa o documento uma vez e o reutiliza; declare-as junto ao nome da operação, por exemplo query GetUser($id: ID!).
  • Se um campo precisar de vários argumentos, escreva-os em uma única linha de argumento separados por vírgulas, por exemplo filter: { status: ACTIVE } como valor.
  • O construtor emite exatamente o texto que você configurar. Se uma operação falhar, primeiro compare os nomes dos seus campos com o esquema atual.

Perguntas frequentes

Não. Ele apenas formata o texto que você fornece; não há endpoint para chamar nem esquema necessário. Preencha as partes da operação e o construtor monta o documento para você.

Sim. Use o menu suspenso de operação para alternar entre consulta, mutação e assinatura. Todo o resto funciona igual: nome, campo raiz, argumentos e campos.

Adicione linhas na seção de argumentos. A chave é o nome do argumento e o valor é o que você passa, por exemplo id: “123” ou id: $id. Linhas com chave vazia são ignoradas. Se você digitar uma variável como $id, declare-a você mesmo junto ao nome da operação, por exemplo query GetUser($id: ID!).

O construtor emite exatamente o texto que você digitou. O erro geralmente significa que um nome de campo ou de argumento não corresponde ao esquema do seu servidor: compare o campo raiz e cada nome de campo com a sua API e corrija a grafia.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Configuração Webpack

Crie um webpack.config.js para webpack 5 a partir de um formulário curto: defina o entry, a pasta de saída e o modo, e ative TypeScript, Babel, um loader CSS, HtmlWebpackPlugin e um servidor de desenvolvimento.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Ferramenta disponível em outros idiomas