Подписки Graphql или интервал опроса? Отличия в разных случаях?

В настоящее время я смотрю курс с использованием стека MERNG, и это, по сути, приложение, в котором вы публикуете материалы, и то, что я пытался достичь сам, - это получать сообщения в реальном времени для всех пользователей, поэтому моя первая мысль была: хорошо давайте использовать подписки на graphql, и в ответ с помощью apollo / client я сделал этот код, чтобы получать новые сообщения в режиме реального времени

import React, { useContext } from "react";
import { useQuery, useSubscription, gql } from "@apollo/client";
import { Grid } from "semantic-ui-react";

import { AuthContext } from "../context/auth";
import PostCard from "../components/PostCard";
import PostForm from "../components/PostForm";

import { FETCH_POSTS_QUERY } from "../util/graphql";

const Home = () => {
  const { user } = useContext(AuthContext);

  const { loading, data: { getPosts: posts } = {} } = useQuery(
    FETCH_POSTS_QUERY,
    // {
    //   pollInterval: 500
    // }
  );

  const { data: { newPost: post } = {} } = useSubscription(POSTS_REAL_TIME);

  return (
    <Grid columns = {3}>
      <Grid.Row className = "page-title">
        <Grid.Column>
          <h1>Recent Posts</h1>
        </Grid.Column>
      </Grid.Row>
      <Grid.Row>
        {user && (
          <Grid.Column>
            <PostForm />
          </Grid.Column>
        )}
        {loading ? (
          <h1>Loading Posts...</h1>
        ) : (
          posts &&
          posts.map(post => {
            return (
              <Grid.Column key = {post.id} style = {{ marginBottom: "20px" }}>
                <PostCard post = {post} />
              </Grid.Column>
            );
          })
        )}
      </Grid.Row>
    </Grid>
  );
};

const POSTS_REAL_TIME = gql`
  subscription {
    newPost {
      id
      body
      createdAt
      username
      likes {
        username
      }
      likeCount
      comments {
        id
        username
        createdAt
      }
      commentCount
    }
  }
`;

export default Home;

И я сказал, хорошо, но ... я не мог показать их на странице, потому что я не знал, как вставить этот объект в свой массив сообщений, который поступает из моего useQuery в начале

поэтому я смотрю, как поддерживать обновление клиента с помощью подписок, и я нашел сообщение, в котором показана документация по graphql, в которой говорится, что вы не должны обновлять свой клиент с помощью подписок, вместо этого используйте pollInterval

const { loading, data: { getPosts: posts } = {} } = useQuery(
    FETCH_POSTS_QUERY,
    {
      pollInterval: 500
    }
  );

Итак, это буквально означает, что я потратил 2 часа, пытаясь создать странный код, в то время как с помощью только одной строки кода я могу это сделать, так что, pollInterval заменяет подписки? как мне использовать подписки? если я использую pollInterval, чтобы держать всех в курсе, это плохо для производительности или что-то в этом роде?

Спасибо за то, что уделили время!

Это толчок против тяги. При посещении бабушки интервалом опроса является то, что ребенок спрашивает «мы уже здесь» каждые несколько минут. Абонемент - это ребенок, который всю дорогу спит, чтобы разбудить по прибытии. У них обоих есть свои плюсы и минусы, и они подходят для разных сценариев использования. Постоянные обновления получают выгоду от подписки. Если вы обновляете только каждые несколько часов, оставлять веб-сокет открытым - пустая трата времени.

zero298 10.04.2021 03:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
10
1

Ответы 1

Я не эксперт, но считаю, что опрос - это неправильный способ сделать это, потому что вы будете постоянно пытаться обновлять данные и тратите ресурсы своего сервера. Я бы использовал подписки (Сервер Apollo, Клиент Apollo (реагировать)) или что-то вроде socket.io, оба используют веб-сокеты под капотом, поэтому это не имеет большого значения.

Другие вопросы по теме