stacker.news/lib/apollo.js
soxa 9092d90797
Enhancements to live comments (#2269)
* check new comments every 10 seconds

* enhance: clear newComments on child comments when we show a topLevel new comment; cleanup: resolvers, logs

* handle comments of comments, new structure to clear newComments on childs

* use original recursive comments data structure

* correct comment structure after deduplication

* faster newComments query deduplication, don't need to know how many comments are there

* cleanup: comments on newComments fetches and dedupes

* cleanup, use correct function declarations

* stop polling after 30 minutes, pause polling if user is not on the page

* ActionTooltip indicating that the user is in a live comment section

* handleVisibilityChange to control polling by visibility

* paused polling styling, check activity on 1 minute intervals and visibility change, light cleanup

* user can resume polling without refreshing the page

* better naming, straightforward dedupeComment on newComment arrival

* cleanup: better naming, get latest comment creation, correct order of comment injection

* cleanup: refactor live comments related functions to use-live-comments.js

* refactor: clearer naming, optimized polling and date retrieval logic, use of constants, general cleanup

* ui: place ShowNewComments in the bottom-right corner of nested comments

* fix: make updateQuery sort-aware to correctly inject the comment in the correct Item query

* cleanup: better naming; fix: usecallback on live comments component; fix leak on useEffect because of missing sort
atomic apollo cache manipulations; manage top sort not being present in item query cache
queue nested comments without a parent, retry on the next poll
fix commit messages

* fix: don't show unpaid comments; cleanup: compact cache merge/dedupe, queue comments via state

* fix: read new comments fragments to inject fresh new comments, fixing dropped comments;

ui: show amount of new comments

refactor: correct function positioning;

cleanup: useless logs

* enhance: queuedComments Ref, cache-and-network fetch policy; freshNewComments readFragment fallback to received comment

* cleanup: detailed comments and better ShowNewComment text

* fix: while showing new comments, also update ncomments for UI and pagination

* refactor: ShowNewComments is its own component; cleanup: proven useless dedupe on ShowNewComments, count nested ncomments from fresh new comments

* enhance: direct latest comment createdAt calc with reduce

* cleanup queue on unmount

* feat: live comments indicator for bottomed-out replies, ncomments updates; fix: nested comment structures

- new comments indicator for bottomed-out replies
- ncomments sync for parent and its ancestors
- limited comments fragment for comments that don't have CommentsRecursive
- reduce cache complexity by removing useless roundtrips

ux: live comments indicator on bottomedOut replies

fix: dedupe newComments before displaying ShowNewComments to avoid false positives

enhance: store ids of new comments in the cache, instead of carrying full comments that would get discarded anyway

hotfix: newComments deduplication ID mismatch, filter null comments from freshNewComments

fix: ncomments not updating for all comment levels; refactor: share Reply update ancestors' ncomments function with ShowNewComments

cleanup: better naming to indicate the total number of comments including nested comments

fix: increment parent comment ncomments

cleanup: Items that will have comments will always have a structure where item.comments is true

cleanup: reduce code complexity checking the nested comment update result instead of preventively reading the fragment

cleanup: avoid double-updating ncomments on parent

fix: don't use CommentsRecursive for bottomed-out comments

cleanup: better fragment naming; add TODO for absolute bottom comments

* enhance: give the possibility to show all new comments of a thread, even nested

* enhance: change favicon on new comments; warn: prop-drilling

* refactor: merge ShowAllNewComments with ShowNewComments, better usage of props

* hotfix: isThread should be recognized when an item has 2 items in its path

* fix regression: topLevel comments not showing

* fix: avoid trying to show new comments even after the depth limit; todo: two recursive counts might be too much

* favicon-new-comment, fix favicon showing also when there aren't new comments

* enhance: highlight new comments when shown; nit-fixes and cleanups

fixes:
- sync local commentsViewedAt on comment injection, to avoid double outline on item re-visit
- avoid double highlighting when client-side visiting an item and injecting a new comment

cleanups:
- move ShowNewComments functions to dedicated lib/comments.js
- bust auto-show enhancement due to bad useEffect usage

todos:
- two recursive counts might be too much

* cleanup: move cache manipulation functions, comments for comments.js

- lib/comments.js explanations for its functions
- itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt on comments.js
- format too many imports from comments.js

todo:
- we're not deduping comments for isThread, which forces us at this state, to dedupe twice

* enhance: highlight new comment with injected field, recursive injection in every case but top level; cleanups

cleanups:
- better separation of concerns for lib/comments.js
- don't show new comment count, avoiding useless complexity
- simpler topLevel/nested logic
- add comments

* backport live comments logic enhancements

use-live-comments:
- remove useless dedupe against already present comments
- check newComments.comments length to tell if there are new comments
- code reordering

show-new-comments:
- show all new comments recursively for nested comments
- get always the newest comments to inject also their own child new comments
- update local storage commentsViewedAt on comment injection
- respect depth on comment injection

comments.js
- apollo cache manipulations now live here

* hotfix: handle undefined item.comments.comments on dedupe

* hotfix: fix lint after merge

* hotfix: limited fragment for recursive comment collection; protect from null fragments; add missing deps to memoization

* merge: missing memo deps, limited fragment for non-recursive comments; fix: don't highlight injected comments with classic outline; cleanup: comments

* docs: clarify ncomments updates

* cleanup: remove unused export

* count and show only the direct new comments and recursively their children

enhance: dedupe against existing comments only in the component
enhance: recursive count/injection share the same logic

* fix regression on top level counting

* hotfix: introduce readNestedCommentsFragment in lib/comments.js

* fix: count also existing comments of a new comment; cleanup: use readCommentFragment also for prepareComments; reduce freshNewComments usage

* add support for comments at the deepest level

fixes:
- client-side navigation re-fetched all new comments because 'after' was cached, now the latest new comment time persists in sessionStorage

enhancements:
- use CommentWithNewMinimal fragment fallback for comments at the deepest level
- tweak ReplyOnAnotherPage to show also how many direct new comments are there

cleanup:
- queue management is not needed anymore, therefore it has been removed

* cleanup: remove logs

* revert counting on ReplyOnAnotherPage, TODO for enhancements PR

* move ShowNewComments to CommentsHeader for top level comments

* fix: update commentsViewedAfterComment to support ncomments

* fix typo, lint

* cleanup: remove old CSS

* enhance: inject topLevel and its children new comments, simplify injection logic

- top-level and nested comment handling share the same recursion logic
- ShowNewComments references the item object for every type of comments
— note: item from item-full.js is passed to comments.js
- depth now starts at 0 to support top level comments
- injection and counting now reach the deepest level, updating also the deepest comment

* cleanup: remove unused topLevel prop

* fix: deepest comments don't have CommentsRecursive structure, don't access it on injection

* move top level ShowNewComments above CommentsHeader; preserve space to avoid vertical layout shifting

* cleanup: remove unused item on CommentsHeader

* enhance: scroll and load new comments via a floating button using IntersectionObserver API; fix merge: restore injected field for outlining

* style: transparent and animated floating button, new comment dot color aligned to new comments accent color

* cleanup: less redundancy between the two types of buttons; enhance: show the floating button only if we're past the element, not only if it's not visible

* enhance: outline newly injected comments using root item's lastCommentAt

* cleanup: remove transparency of floating comments button, remove other traces of the injected field

* adapt and restore showing all new comments of a thread

* fix: respect deepest comments structure on injection, adjust depth limit; cleanup: consistent naming

* fix: avoid double outlines because of all conditions being met

* cleanup: remove favicon, dedicate space for useVisibility, correct comments

* ux: show all new comments of a thread only if its children have them

* mark injected comments in the cache for reliable outlining

* cleanup: clearer structure, more explaining

* optimize: better closure usage, remove duplicate code, immutable payloads

- ncomments count logic shared with injection and counting
- don't re-create and persist closures for every injection, rather temporarily on injection
- access item hierarchy once, avoid creating new arrays
- don't create and mutate payloads, rather know what to return

fixes:
- fix wrong parameters on traverseNewComments recursion

* cleanup: further clarifications

* safer rootLastCommentAt usage for injected comments outlining

* hotfix: ignore nDirectComments server updates when the item being updated has pending newComments, fixes CommentEdit consequences

* simpler show all new comments text for thread comments, regardless of how many

* fix: reference the correct Item for newComments reading, during nDirectComments apollo merge

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
2025-07-23 11:57:36 -05:00

396 lines
12 KiB
JavaScript

import { ApolloClient, InMemoryCache, HttpLink, makeVar, split, from } from '@apollo/client'
import { BatchHttpLink } from '@apollo/client/link/batch-http'
import { decodeCursor, LIMIT } from './cursor'
import { COMMENTS_LIMIT, SSR } from './constants'
import { RetryLink } from '@apollo/client/link/retry'
import { isMutationOperation, isQueryOperation } from '@apollo/client/utilities'
function isFirstPage (cursor, existingThings, limit = LIMIT) {
if (cursor) {
const decursor = decodeCursor(cursor)
return decursor.offset === limit
} else {
// we don't have anything cached, or our existing items are less than
// or equal to a full page
return existingThings?.length < limit
}
}
const defaultFetchPolicy = SSR ? 'cache-only' : 'cache-first'
const defaultNextFetchPolicy = SSR ? 'cache-only' : 'cache-first'
export default function getApolloClient () {
if (SSR) {
return getClient(`${process.env.SELF_URL}/api/graphql`)
} else {
window.apolloClient ||= getClient('/api/graphql')
return window.apolloClient
}
}
export const meAnonSats = {}
const retryLink = new RetryLink({
delay: {
initial: 300,
max: 30000,
jitter: true
},
attempts: {
max: Infinity,
retryIf: (error, _operation) => {
// retry only if the error is not a mutation and the operation is a query
return !!error && !isMutationOperation(_operation.query) && isQueryOperation(_operation.query)
}
}
})
function getClient (uri) {
const link = from([
retryLink,
split(
// batch zaps if wallet is enabled so they can be executed serially in a single request
operation => operation.operationName === 'act' && operation.variables.act === 'TIP' && operation.getContext().batch,
new BatchHttpLink({ uri, batchInterval: 1000, batchDebounce: true, batchMax: 0, batchKey: op => op.variables.id }),
new HttpLink({ uri })
)
])
return new ApolloClient({
link,
ssrMode: SSR,
connectToDevTools: process.env.NODE_ENV !== 'production',
cache: new InMemoryCache({
freezeResults: true,
// https://github.com/apollographql/apollo-client/issues/7648
possibleTypes: {
PaidAction: [
'ItemPaidAction',
'ItemActPaidAction',
'PollVotePaidAction',
'SubPaidAction',
'DonatePaidAction',
'ReceivePaidAction'
],
Notification: [
'Reply',
'Votification',
'Mention',
'Invitification',
'Earn',
'JobChange',
'InvoicePaid',
'WithdrawlPaid',
'Referral',
'CowboyHat',
'NewHorse',
'LostHorse',
'NewGun',
'LostGun',
'FollowActivity',
'ForwardedVotification',
'Revenue',
'SubStatus',
'TerritoryPost',
'TerritoryTransfer',
'Reminder',
'ItemMention',
'Invoicification'
],
WalletOrTemplate: [
'Wallet',
'WalletTemplate'
]
},
typePolicies: {
Sub: {
keyFields: ['name'],
fields: {
optional: {
merge: true
}
}
},
User: {
// https://www.apollographql.com/docs/react/caching/cache-field-behavior/#merging-non-normalized-objects
fields: {
privates: {
merge: true
},
optional: {
merge: true
},
bio: {
merge: true
}
}
},
Fact: {
keyFields: ['id', 'type']
},
Wallet: {
fields: {
vaultEntries: {
replace: true
}
}
},
Query: {
fields: {
sub: {
keyArgs: ['name'],
merge (existing, incoming) {
return incoming
}
},
topSubs: {
keyArgs: ['when', 'by', 'from', 'to', 'limit'],
merge (existing, incoming, { args }) {
if (isFirstPage(incoming.cursor, existing?.subs, args.limit)) {
return incoming
}
return {
cursor: incoming.cursor,
subs: [...(existing?.subs || []), ...incoming.subs]
}
}
},
topUsers: {
keyArgs: ['when', 'by', 'from', 'to', 'limit'],
merge (existing, incoming, { args }) {
if (isFirstPage(incoming.cursor, existing?.users, args.limit)) {
return incoming
}
return {
cursor: incoming.cursor,
users: [...(existing?.users || []), ...incoming.users]
}
}
},
mySubscribedUsers: {
keyArgs: false,
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.users)) {
return incoming
}
return {
cursor: incoming.cursor,
users: [...(existing?.users || []), ...incoming.users]
}
}
},
myMutedUsers: {
keyArgs: false,
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.users)) {
return incoming
}
return {
cursor: incoming.cursor,
users: [...(existing?.users || []), ...incoming.users]
}
}
},
userSuggestions: {
keyArgs: ['q', 'limit'],
merge (existing, incoming) {
return incoming
}
},
topCowboys: {
keyArgs: [],
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.users)) {
return incoming
}
return {
cursor: incoming.cursor,
users: [...(existing?.users || []), ...incoming.users]
}
}
},
items: {
keyArgs: ['sub', 'sort', 'type', 'name', 'when', 'by', 'from', 'to', 'limit'],
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.items)) {
return incoming
}
return {
cursor: incoming.cursor,
items: [...(existing?.items || []), ...incoming.items],
pins: [...(existing?.pins || []), ...(incoming.pins || [])],
ad: incoming?.ad || existing?.ad
}
}
},
related: {
keyArgs: ['id', 'title', 'minMatch', 'limit'],
merge (existing, incoming, { args }) {
if (isFirstPage(incoming.cursor, existing?.items, args.limit)) {
return incoming
}
return {
cursor: incoming.cursor,
items: [...(existing?.items || []), ...incoming.items]
}
}
},
search: {
keyArgs: ['q', 'sub', 'sort', 'what', 'when', 'from', 'to', 'limit'],
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.items)) {
return incoming
}
return {
cursor: incoming.cursor,
items: [...(existing?.items || []), ...incoming.items]
}
}
},
searchUsers: {
keyArgs: ['q', 'limit', 'similarity'],
merge (existing, incoming) {
return [...(existing?.searchUsers || []), ...incoming]
}
},
notifications: {
keyArgs: ['inc'],
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.notifications)) {
return incoming
}
return {
cursor: incoming.cursor,
earn: existing?.earn || incoming.earn,
notifications: [...(existing?.notifications || []), ...incoming.notifications],
lastChecked: existing?.lastChecked || incoming.lastChecked
}
}
},
numBolt11s: {
keyArgs: [],
merge (existing, incoming) {
return incoming
}
},
walletHistory: {
keyArgs: ['inc'],
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.facts)) {
return incoming
}
return {
cursor: incoming.cursor,
facts: [...(existing?.facts || []), ...incoming.facts]
}
}
},
walletLogs: {
keyArgs: ['protocolId'],
merge (existing, incoming) {
return incoming
}
},
failedInvoices: {
keyArgs: [],
merge (existing, incoming) {
return incoming
}
}
}
},
Item: {
fields: {
comments: {
keyArgs: ['sort'],
merge (existing, incoming) {
if (isFirstPage(incoming.cursor, existing?.comments, COMMENTS_LIMIT)) {
return incoming
}
return {
cursor: incoming.cursor,
comments: [...(existing?.comments || []), ...incoming.comments]
}
}
},
nDirectComments: {
merge (existing, incoming, { variables, readField, toReference }) {
// if the item has new comments, don't merge the nDirectComments field
// preventing new comments not yet injected from being counted, thus causing bottomedOut
if (variables?.id && existing !== undefined) {
const item = toReference({
__typename: 'Item',
id: variables.id
})
const newComments = readField('newComments', item)
if (newComments?.length > 0) {
return existing
}
}
return incoming
}
},
newComments: {
read (newComments) {
return newComments || []
}
},
injected: {
read (injected) {
return injected || false
}
},
meAnonSats: {
read (existingAmount, { readField }) {
if (SSR) return null
const itemId = readField('id')
// we need to use reactive variables such that updates
// to local state propagate correctly
// see https://www.apollographql.com/docs/react/local-state/reactive-variables
let reactiveVar = meAnonSats[itemId]
if (!reactiveVar) {
const storageKey = `TIP-item:${itemId}`
const existingAmount = Number(window.localStorage.getItem(storageKey) || '0')
reactiveVar = makeVar(existingAmount || 0)
meAnonSats[itemId] = reactiveVar
}
return reactiveVar()
}
}
}
}
}
}),
assumeImmutableResults: true,
queryDeduplication: true,
defaultOptions: {
watchQuery: {
initialFetchPolicy: defaultFetchPolicy,
fetchPolicy: defaultFetchPolicy,
nextFetchPolicy: defaultNextFetchPolicy,
ssr: SSR
},
query: {
initialFetchPolicy: defaultFetchPolicy,
fetchPolicy: defaultFetchPolicy,
nextFetchPolicy: defaultNextFetchPolicy,
ssr: SSR
}
}
})
}