В настоящее время я смотрю курс с использованием стека 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, чтобы держать всех в курсе, это плохо для производительности или что-то в этом роде?
Спасибо за то, что уделили время!





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