Fetch public todos - subscription

Let's define the graphql query to be used:

Open src/components/TodoPublicList.vue and add the following imports.

githubsrc/components/TodoPublicList.vue
<script>
+ import gql from "graphql-tag";
import TodoItem from "../components/TodoItem";
import TodoFilters from "../components/TodoFilters";

Now let's define the subscription query to get notified about new public todos

<script>
import gql from "graphql-tag";
import TodoItem from "../components/TodoItem";
import TodoFilters from "../components/TodoFilters";
+ const NOTIFY_NEW_PUBLIC_TODOS = gql`
+ subscription notifyNewPublicTodos {
+ todos(
+ where: { is_public: { _eq: true }}
+ order_by: { created_at: desc }
+ limit: 1
+ ) {
+ id
+ title
+ created_at
+ }
+ }
+ `;

What does the Subscription do?

The query fetches todos with a simple condition; is_public must be true and we limit the results to 1. We would just like to get notified whenever a new todo comes in. We sort the todos by its latest created_at time according to the schema. We specify which fields we need for the todos node.

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️