graphql-yoga is built on other packages that provide functionality required for building a GraphQL server such as web server frameworks like express and apollo-server, GraphQL subscriptions with graphql-subscriptions and subscriptions-transport-ws, GraphQL engine & schema helpers including graphql.js and graphql-tools, and an interactive GraphQL IDE with graphql-playground.

The most common used (but not best maintained) library for such a PubSub engine in the GraphQL context is graphql-subscriptions. There are also adapters available for more distributed systems (where all GraphQL API replicas must be notified about the event) e.g. over Redis.

During that work, we created and merged the reference implementation into graphql-js and created two supporting libraries: graphql-subscriptions and subscriptions-transport-ws. Here is a talk with deep dive into all the details.

The Prisma / GraphQL-Yoga comes with Subscriptions, and this was the first thing I came across when my client asked for realtime updates. The implementation was quite difficult - took me a long time. Eventually, it was working locally, and in staging. However, when it came to the production environment, for some reason it just didn't work! This unfortunately ended up with a user losing an auction, which ultimately went to court etc.

There are also other solutions available: https://github.com/apollographql/graphql-subscriptions#pubsub-implementations

First, let's try to understand what PubSub is exactly. Apollo Server uses a publish-subscribe (pub/sub) model to track events that update subscriptions. The graphql-subscriptions library included in all apollo-server packages (including middleware integrations) provides a PubSub class as a basic in-memory event bus.

To add this, I can just expand the basic setup above. To do so, I do actually use a couple of small Apollo modules! Most can be picked and configured independently. For this case, graphql-subscriptions provides a little bit of pubsub logic that works within resolvers, and subscriptions-transport-ws integrates that into Express to handle the websockets themselves. Super helpful

Link: https://swr.vercel.app/

Now, it's time to consume our API. We'll use React for this tutorail, but feel free to use any other framework you prefer; the process remains the same. Additionally, we'll utilize SWR to fetch data from the API and TypeScript to ensure type safety.

'use client'; import FormPostUpdate from './components/FormPostUpdate/FormPostUpdate'; import FormDelete from '../app/components/FormDelete/FormDelete'; import { useFetch } from './hooks/useFetch'; import { useFetchSWR } from './hooks/useFetchSWR'; import Chart from './components/Chart/Chart'; export default function Home() { // Uncomment the code below and comment out the "useFetch" code if your want to use SWR for data fetching --> https://swr.vercel.app/docs/with-nextjs // const { data, error, isLoading } = useFetchSWR( // 'http://127.0.0.1:8000/api/anime/' // ); // Uses the Fetch API for data fetching const { data, error, isLoading } = useFetch( 'http://127.0.0.1:8000/api/anime/' ); if (error) return

An error has occurred.

; if (isLoading) return

Loading...

; console.log(data); return ( <>

POST: Add Anime Form

UPDATE: Update Anime Form

Select an ID from the list. You can change the data for Anime ID, Name and Release.

DELETE: Delete Anime Form

GET: Anime Data List

{data.map((anime) => (

• {anime.anime_name}

• ID: {anime.id}
• Anime ID: {anime.anime_id}
• Anime Release Year: {anime.anime_release}

))}

); }

There are libraries like SWR, RTK Query, and React Query that simplify the data fetching process on the client and take care of the state, error handling, caching, and re-fetching for you.

Then install the package SWR into your application with the following command:

SWR

I would suggest taking a look at SWR [0]. I think it strikes a very nice balance between using fetch and something more heavy-handed like React Query.

[0] https://swr.vercel.app/

Check out the official documentation for SWR here

SWR: A React Hooks library for remote data fetching. It supports features like caching, revalidation, error handling, prefetching, pagination, and support for SSG and SSR. Its bundle size is 10kb minified and 4.4kb gzipped

SWR Library