Obtener tareas pendientes públicas - suscripción

Vamos a definir la consulta de graphql que se va a utilizar:

Abra src/components/Todo/TodoPublicList.js y agregue las siguientes importaciones.

githubsrc/components/Todo/TodoPublicList.js
import React, { useState, Fragment } from 'react';
+ import { gql } from "@apollo/client";
import TaskItem from "./TaskItem";

Ahora vamos a definir la consulta de suscripción para recibir notificaciones sobre las nuevas tareas pendientes públicas

import React, { useState, Fragment } from 'react';
import { gql } from "@apollo/client";
import TaskItem from "./TaskItem";
const TodoPublicList = props => {
...
}
+ // Run a subscription to get the latest public todo
+ const NOTIFY_NEW_PUBLIC_TODOS = gql`
+ subscription notifyNewPublicTodos {
+ todos (where: { is_public: { _eq: true}}, limit: 1, order_by: {created_at: desc }) {
+ id
+ created_at
+ }
+ }
+ `;
export default TodoPublicList;

Además, vamos a añadir un componente funcional que utilice esta consulta de suscripción. Importar useSubscription desde @apollo/client para comenzar.

import React, { Component, Fragment } from 'react';
- import { gql } from "@apollo/client";
+ import { useSubscription, gql } from "@apollo/client";
import TaskItem from "./TaskItem";
const TodoPublicList = props => {
...
}
// Run a subscription to get the latest public todo
const NOTIFY_NEW_PUBLIC_TODOS = gql`
subscription notifyNewPublicTodos {
todos (where: { is_public: { _eq: true}}, limit: 1, order_by: {created_at: desc }) {
id
created_at
}
}
`;
+ const TodoPublicListSubscription = () => {
+ const { loading, error, data } = useSubscription(NOTIFY_NEW_PUBLIC_TODOS);
+ if (loading) {
+ return <span>Loading...</span>;
+ }
+ if (error) {
+ return <span>Error</span>;
+ }
+ return {};
+ };
export default TodoPublicList;

¿Qué hace la suscripción?

La consulta obtiene todos con una simple condición; is_public ha de ser verdadero. También limitamos el número de tareas pendientes a 1, ya que solo queremos ser notificados cuando aparezca una nueva tarea pendiente. Ordenamos las tareas pendientes según su created_at más reciente, de acuerdo al esquema. Especificamos qué campos necesitamos para el nodo de tareas pendientes.

Ahora mismo no devolvemos nada cuando aparecen nuevos datos. Ya disponemos del componente TodoPublicList, que renderiza el listado de tareas pendientes públicas. Así que vamos a devolver ese componente.

const TodoPublicListSubscription = () => {
const { loading, error, data } = useSubscription(NOTIFY_NEW_PUBLIC_TODOS);
if (loading) {
return <span>Loading...</span>;
}
if (error) {
return <span>Error</span>;
}
- return {};
+ return (<TodoPublicList latestTodo={data.todos.length ? data.todos[0] : null} />);
};

Ahora nos gustaría devolver el nuevo componente TodoPublicListSubscription, que lleva integrado el hook React useSubscription.

- export default TodoPublicList;
+ export default TodoPublicListSubscription;
Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin