Fiz um pacote para mockar chamadas GraphQL com Apollo Client

Motivação

Esse foi um dos projetos que nasceram da necessidade no mundo real. Aqui na empresa onde estou, tinhamos um problema de sincronicidade entre tasks do backend e frontend, causando com que as vezes precisassemos subir features nos frontends de forma mockada, e depois quando o backend ficasse pronto, atualizassemos para conectar de fato com o servidor.

Utilização

Meu foco aqui foi na usabilidade e facilidade, buscando um plug-and-play fácil de configurar e que funcionasse bem para o que precisávamos.

O setup é basicamente o seguinte:

import React from 'react';
import { ApolloProvider, useQuery, gql } from '@apollo/client';
import { createAutoMockApolloClient } from '@kozielgpc/graphql-apollo-auto-mocker';

// Query para mockar
const GET_USER = gql`
  query GetUser($id: ID!) {
    getUser(id: $id) {
      id
      name
      email
      createdAt
    }
  }
`;

function UserProfile({ userId }: { userId: string }) {
  // Utilização padrão de useQuery, do mesmo jeito que usaria apontando para o servidor original
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.getUser.name}</h1>
      <p>Email: {data.getUser.email}</p>
      <p>Member since: {data.getUser.createdAt}</p>
    </div>
  );
}

function App() {
  // Aqui entra o segredo: Criação do ApolloClient com o Wrapper mockado,
  // passando configurações de habilitar/desabilitar o mock response. 
  // Continua com todas as funcionalidades do ApolloClient original, 
  // apenas adicionando o setup de mock.
  const client = createAutoMockApolloClient({
    schemaSDL: yourSchemaSDL,
    // URI do servidor original
    uri: '/graphql',
    mockConfig: { enabled: true }
  });

  return (
    <ApolloProvider client={client}>
      <UserProfile userId="123" />
    </ApolloProvider>
  );
}

Configuração

O objeto de configuração é simples, ele basicamente diz qual query quer mockar, qual entidade e qual o retorno:

import { MockConfig } from '@kozielgpc/graphql-apollo-auto-mocker';

const mockConfig: MockConfig = {
  // Toggle global
  enabled: true,
  
  // Controle por operação
  operations: {
    getOrders: { enabled: true },
    getUser: { enabled: false }, // Esse vai chamar o servidor original
    getUserProfile: { enabled: true }
  },
  
  // Controle de entidades/campos
  types: {
    Order: {
      fields: {
        totalValue: { 
          min: 50, 
          max: 5000 
        },
        items: { 
          arrayMin: 1, 
          arrayMax: 10 
        },
        status: {
          value: () => ['pending', 'processing', 'shipped', 'delivered'][Math.floor(Math.random() * 4)]
        }
      }
    },
    Item: {
      fields: {
        quantity: { 
          min: 1, 
          max: 20 
        },
        price: { 
          min: 5, 
          max: 500 
        }
      }
    },
    User: {
      fields: {
        name: { 
          value: () => `Test User ${Math.floor(Math.random() * 1000)}` 
        },
        email: { 
          value: '[email protected]' 
        }
      }
    }
  }
};

Encerramento

De forma geral é isso, simples e direto ao ponto!
No repositório tem mais detalhes sobre a implementação e funcionalidades.
Pretendo adicionar mais funcionalidades em breve, mas no momento já satisfez bem as nossas necessidades!