GraphQL con React Native y Apollo Client

GraphQL vs REST en apps móviles

GraphQL resuelve el problema de over-fetching (recibir más datos de los necesarios) y under-fetching (necesitar múltiples requests) que es especialmente problemático en mobile. Con GraphQL, el cliente pide exactamente los campos que necesita. Deepyze usa GraphQL en proyectos donde la flexibilidad de queries es importante.

Setup con Apollo Client

npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://tu-api.com/graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: `Bearer ${token}`,
  },
});

export default function App() {
  return (
    <ApolloProvider client={client}>
      {/* tu app */}
    </ApolloProvider>
  );
}

Query básica

import { useQuery, gql } from '@apollo/client';

const PRODUCTOS = gql`
  query Productos($categoria: String) {
    productos(categoria: $categoria) {
      id
      nombre
      precio
      imagen
    }
  }
`;

function ListaProductos({ categoria }) {
  const { data, loading, error } = useQuery(PRODUCTOS, {
    variables: { categoria },
  });

  if (loading) return <Skeleton />;
  return <FlatList data={data.productos} />;
}

Mutation

const CREAR_PEDIDO = gql`
  mutation CrearPedido($items: [ItemInput!]!) {
    crearPedido(items: $items) {
      id
      total
      estado
    }
  }
`;

const [crearPedido, { loading }] = useMutation(CREAR_PEDIDO, {
  onCompleted: (data) => {
    router.push(`/pedido/${data.crearPedido.id}`);
  },
});

¿Necesitás una API GraphQL para tu app? Deepyze puede desarrollar backend y frontend.