Saltar al contenido principal

GQLEndpoint

Los GQLEndpoints son para protocolos basados en GraphQL.

extends

GQLEndpoint extiende Endpoint

Uso​

Editor en vivo
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 del fetch​

GQLEndpoint amplía Endpoint al ofrecer personalizaciones para un método fetch proporcionado.

  1. Preparar el fetch
    1. url
    2. getRequestInit()
  2. Ejecutar el 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 el fetch​

Los miembros funcionan también como opciones (segundo argumento del constructor). Aunque ninguno es obligatorio, los primeros tienen valores por defecto.

url: string​

GraphQL usa una sola url para todas las operaciones.

getRequestInit(body): RequestInit​

Prepara el RequestInit que se usa en el fetch. Se envía a fetchResponse

getQuery(variables): string​

Prepara la consulta (query), que se envía como parte del cuerpo de la petición.

getHeaders(headers: HeadersInit): HeadersInit​

Lo llama getRequestInit para determinar los encabezados HTTP

Esto suele ser útil para la autenticación

aviso

No uses hooks aquí.

Manejar el fetch​

fetchResponse(input, init): Promise​

Realiza la llamada fetch

parseResponse(response): Promise​

Toma la Response y la interpreta con .text() o .json()

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

Aplica cualquier transformación al resultado ya interpretado. Por defecto es la función identidad.

Ciclos de vida del Endpoint​

schema: Schema​

Definición declarativa de cómo procesar las respuestas

No proporcionar esta opción significa que no se extraerá ninguna entidad.

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​

Tiempo de vida personalizado en la caché de los datos del recurso obtenido. Sobrescribirá el valor establecido en NetworkManager.

Más información sobre el tiempo de caducidad

errorExpiryLength?: number​

Tiempo de vida personalizado de los errores de datos del recurso obtenido. Sobrescribirá el valor establecido en NetworkManager.

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

'soft' usará datos obsoletos (si existen) en caso de error; undefined o no proporcionar la opción resultará en un error.

Más información sobre errorPolicy

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

invalidIfStale: boolean​

Indica que los datos obsoletos deben considerarse inutilizables y, por tanto, no devolverse desde la caché. Esto significa que useSuspense() se suspenderá cuando los datos estén obsoletos, aunque ya existan en la caché.

pollFrequency: number​

Frecuencia de sondeo (polling) en milisegundos. Requiere usar useSubscription() o useLive() para tener efecto.

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

Cuando se proporciona, cualquier fetch con este endpoint se comportará como si el valor de retorno fakePayload de esta función fuera una respuesta de red exitosa. Cuando el fetch real se completa (sea cual sea su resultado, éxito o fallo), la actualización optimista se reemplaza por la respuesta de red real.

extend(options): Endpoint​

Se puede usar para personalizar aún más la definición del endpoint

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

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