パブリックtodoの取得 - subscription

使用するgraphql queryを定義します。

src/components/Todo/TodoPublicList.js を開いて以下のimportを追加します。

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

subscription queryを定義して、新しいパブリックtodoの通知を取得するようにします。

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;

subscription queryで使用する関数コンポーネントも追加します。そのためには、 useSubscription@apollo/client からインポートすることから始めます。

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;

Subscriptionの役割について

このqueryは、 is_public がtrueであるという単純な条件を使って、 todos を取得します。新しいtodoが入ってくるたびに通知を受け取りたいので、todoの数は1件に制限します。スキーマに従って、最新のcreated_atの時刻でtodoを並び替えます。todoノードに必要なフィールドを指定します。

この状態では新しいデータが入ってきても何も返しません。パブリックtodoのリストをレンダリングするためのTodoPublicListコンポーネントは、チュートリアルの中で既に作成しています。このコンポーネントが返るようにしましょう。

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} />);
};

useSubscription Reactフックに統合した、この新しいTodoPublicListSubscriptionコンポーネントが返るようにします。

- 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