Pular para o conteúdo principal

GQLEndpoint

GQLEndpoints são para protocolos baseados em GraphQL.

extends

GQLEndpoint estende Endpoint

Uso​

Editor em tempo real
import { UserResource } from './resources';

export default function ProfileEdit({ id }: { id: number }) {
  const { user } = useSuspense(UserResource.get, { id });

  const controller = useController();
  const handleChange = ({ currentTarget: { value: name } }) =>
    controller.fetch(UserResource.update, { id, name });

  return (
    <TextInput
      label="Name"
      value={user.name}
      onChange={handleChange}
    />
  );
}
Resultado
Store▶

query(gql, schema)​

import { GQLEndpoint } from '@data-client/graphql';
import User from 'schema/User';

const gql = new GQLEndpoint('/');

export const getUser = gql.query(
  (v: { name: string }) => `query getUser($name: String!) {
    user(name: $name) {
      id
      name
      email
    }
  }`,
  { user: User },
);

getUser({ name: 'bob' });

mutate(gql, schema)​

import { GQLEndpoint } from '@data-client/graphql';
import User from 'schema/User';

const gql = new GQLEndpoint('/');

export const updateUser = gql.mutate(
  (v: Partial<User>) => `query updateUser($user: User!) {
    user(name: $user) {
      id
      name
      email
    }
  }`,
  { user: User },
);

updateUser({ id: '5', name: 'bob', email: '[email protected]' });

Ciclo de vida do fetch​

O GQLEndpoint acrescenta ao Endpoint personalizações para um método de fetch fornecido.

  1. Preparar o fetch
    1. url
    2. getRequestInit()
  2. Executar o fetch
    1. fetchResponse()
    2. parseResponse()
    3. process()
fetch implementation for GQLEndpoint
async function fetch(variables) {
  return this.fetchResponse(
    this.url,
    this.getRequestInit(variables),
  ).then(res => this.process(res, variables));
}

Preparar o fetch​

Os membros também funcionam como opções (segundo argumento do construtor). Embora nenhum seja obrigatório, os primeiros têm valores padrão.

url: string​

O GraphQL usa uma única url para todas as operações.

getRequestInit(body): RequestInit​

Prepara o RequestInit usado no fetch. Ele é enviado para fetchResponse

getQuery(variables): string​

Prepara a query, que será enviada como parte do corpo da requisição.

getHeaders(headers: HeadersInit): HeadersInit​

Chamado por getRequestInit para determinar os Headers HTTP

Isso costuma ser útil para autenticação

aviso

Não use hooks aqui.

Tratar o fetch​

fetchResponse(input, init): Promise​

Executa a chamada de fetch

parseResponse(response): Promise​

Recebe a Response e faz o parse via .text() ou .json()

process(value, ...args): any​

Aplica quaisquer transformações ao resultado do parse. O padrão é a função identidade.

Ciclos de vida do Endpoint​

schema: Schema​

Definição declarativa de como processar as respostas

Não informar esta opção significa que nenhuma entity será extraída.

import { GQLEntity, GQLEndpoint } from '@data-client/graphql';
const gql = new GQLEndpoint('https://nosy-baritone.glitch.me');

class User extends GQLEntity {
  username = '';
}

export const getUser = gql.query(
  (v: { name: string }) => `query GetUser($name: String!) {
    user(name: $name) {
      id
      name
      email
    }
  }`,
  { user: User },
);

dataExpiryLength?: number​

Tempo de vida personalizado, no cache, dos dados do recurso buscado. Substitui o valor definido no NetworkManager.

Saiba mais sobre o tempo de expiração

errorExpiryLength?: number​

Tempo de vida personalizado dos erros de dados do recurso buscado. Substitui o valor definido no NetworkManager.

errorPolicy?: (error: any) => 'soft' | undefined​

'soft' usará dados desatualizados (se existirem) em caso de erro; undefined, ou não informar a opção, resultará em erro.

Saiba mais sobre errorPolicy

errorPolicy(error) {
  return error.status >= 500 ? 'soft' : undefined;
}

invalidIfStale: boolean​

Indica que dados desatualizados devem ser considerados inutilizáveis e, portanto, não ser retornados do cache. Isso significa que useSuspense() vai suspender quando os dados estiverem desatualizados, mesmo que já existam no cache.

pollFrequency: number​

Frequência, em milissegundos, do polling. Requer o uso de useSubscription() ou useLive() para ter efeito.

getOptimisticResponse: (snap, ...args) => fakePayload​

Quando informado, qualquer fetch com este endpoint se comportará como se o valor de retorno fakePayload desta função fosse uma resposta de rede bem-sucedida. Quando o fetch real for concluído (com falha ou com sucesso), a atualização otimista será substituída pela resposta real da rede.

extend(options): Endpoint​

Pode ser usado para personalizar ainda mais a definição do endpoint

const gql = new GQLEndpoint('https://nosy-baritone.glitch.me');

const authGQL = gql.extend({
  getHeaders(headers: HeadersInit): HeadersInit {
    return {
      ...headers,
      'Access-Token': getAuth(),
    };
  },
});