Skip to content

Commit b2b2bf5

Browse files
WRadoslawWRadoslaw
committed
🚤 Channels query performance (Joystream#5658)
* Regen graphql * Remove unnecessary active video fetching for channels
1 parent 0c9db9a commit b2b2bf5

15 files changed

Lines changed: 166 additions & 62 deletions

File tree

‎packages/atlas/src/api/hooks/channel.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { useEffect, useMemo, useRef, useState } from 'react'
66

77
import {
88
FollowChannelMutation,
9+
GetBasicChannelsQuery,
10+
GetBasicChannelsQueryVariables,
911
GetChannelNftCollectorsQuery,
1012
GetChannelNftCollectorsQueryVariables,
1113
GetDiscoverChannelsQuery,
@@ -18,6 +20,7 @@ import {
1820
GetTop10ChannelsQueryVariables,
1921
UnfollowChannelMutation,
2022
useFollowChannelMutation,
23+
useGetBasicChannelsQuery,
2124
useGetChannelNftCollectorsQuery,
2225
useGetDiscoverChannelsQuery,
2326
useGetExtendedBasicChannelsQuery,
@@ -29,6 +32,23 @@ import {
2932
import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
3033

3134
export const useBasicChannel = (
35+
id: string,
36+
opts?: QueryHookOptions<GetBasicChannelsQuery, GetBasicChannelsQueryVariables>
37+
) => {
38+
const { data, ...rest } = useGetBasicChannelsQuery({
39+
...opts,
40+
variables: {
41+
...opts?.variables,
42+
where: { ...opts?.variables?.where, id_eq: id },
43+
},
44+
})
45+
return {
46+
channel: data?.channels[0],
47+
...rest,
48+
}
49+
}
50+
51+
export const useBasicExtendedChannel = (
3252
id: string,
3353
opts?: QueryHookOptions<GetExtendedBasicChannelsQuery, GetExtendedBasicChannelsQueryVariables>
3454
) => {
@@ -71,6 +91,20 @@ export const useFullChannel = (
7191
}
7292

7393
export const useBasicChannels = (
94+
variables?: GetBasicChannelsQueryVariables,
95+
opts?: QueryHookOptions<GetBasicChannelsQuery, GetBasicChannelsQueryVariables>
96+
) => {
97+
const { data, ...rest } = useGetBasicChannelsQuery({
98+
...opts,
99+
variables,
100+
})
101+
return {
102+
channels: data?.channels,
103+
...rest,
104+
}
105+
}
106+
107+
export const useBasicExtendedChannels = (
74108
variables?: GetExtendedBasicChannelsQueryVariables,
75109
opts?: QueryHookOptions<GetExtendedBasicChannelsQuery, GetExtendedBasicChannelsQueryVariables>
76110
) => {

‎packages/atlas/src/api/queries/__generated__/baseTypes.generated.ts‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/atlas/src/api/queries/__generated__/channels.generated.tsx‎

Lines changed: 80 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/atlas/src/api/queries/channels.graphql‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ query GetFullChannel($id: String!) {
88
}
99
}
1010

11+
query GetBasicChannels($where: ChannelWhereInput, $limit: Int = 50, $orderBy: [ChannelOrderByInput!]) {
12+
channels(where: $where, orderBy: $orderBy, limit: $limit) {
13+
...BasicChannelFields
14+
}
15+
}
16+
1117
# CHANGE: `channels` replaced with `extendedChannels` (which include `activeVideosCount`)
1218
query GetExtendedBasicChannels($where: ExtendedChannelWhereInput, $limit: Int = 50, $orderBy: [ChannelOrderByInput!]) {
1319
extendedChannels(where: $where, orderBy: $orderBy, limit: $limit) {

‎packages/atlas/src/api/schemas/orion.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/atlas/src/components/ListItem/ListItem.styles.ts‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -111,16 +111,15 @@ export const LabelText = styled(Text)`
111111
text-align: left;
112112
`
113113

114-
const iconStyles = ({ destructive, isHovering, isSelected }: NodeContainerProps) =>
115-
css`
116-
> svg > path {
117-
fill: ${destructive
118-
? cVar('colorTextError')
119-
: isHovering || isSelected
120-
? cVar('colorTextStrong')
121-
: cVar('colorText')};
122-
}
123-
`
114+
const iconStyles = ({ destructive, isHovering, isSelected }: NodeContainerProps) => css`
115+
> svg > path {
116+
fill: ${destructive
117+
? cVar('colorTextError')
118+
: isHovering || isSelected
119+
? cVar('colorTextStrong')
120+
: cVar('colorText')};
121+
}
122+
`
124123

125124
type NodeContainerProps = {
126125
destructive?: boolean

‎packages/atlas/src/components/Pill/Pill.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const variantStyles = ({ variant }: PillProps) => {
5151
switch (variant) {
5252
case 'overlay':
5353
return css`
54-
background-color: ${cVar('colorBackgroundOverlay')}; ;
54+
background-color: ${cVar('colorBackgroundOverlay')};
5555
`
5656
case 'danger':
5757
return css`

‎packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,16 @@ const RegDate = ({ date }: { date: Date }) => {
6464
)
6565
}
6666

67-
const Channel = ({ channel }: { channel: YppReferral['channel'] }) => {
68-
const { extendedChannel, loading } = useBasicChannel(channel, {
67+
const Channel = ({ channel: channelId }: { channel: YppReferral['channel'] }) => {
68+
const { channel, loading } = useBasicChannel(channelId, {
6969
onError: (error) => SentryLogger.error('Failed to fetch memberships', 'ActiveUserProvider', error),
7070
})
7171

7272
return (
73-
<StyledLink to={absoluteRoutes.viewer.channel(extendedChannel?.channel.id)}>
73+
<StyledLink to={absoluteRoutes.viewer.channel(channel?.id)}>
7474
<SenderItem
75-
nodeStart={
76-
<Avatar assetUrls={extendedChannel?.channel.avatarPhoto?.resolvedUrls} size={32} loading={loading} />
77-
}
78-
label={extendedChannel?.channel.title}
75+
nodeStart={<Avatar assetUrls={channel?.avatarPhoto?.resolvedUrls} size={32} loading={loading} />}
76+
label={channel?.title}
7977
isInteractive={false}
8078
/>
8179
</StyledLink>

‎packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,14 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
4747
customTitle,
4848
followButton = false,
4949
}) => {
50-
const { extendedChannel } = useBasicChannel(id || '', {
50+
const { channel } = useBasicChannel(id || '', {
5151
skip: !id,
5252
onCompleted: (data) => !data && onNotFound?.(),
5353
onError: (error) => SentryLogger.error('Failed to fetch channel', 'ChannelLink', error, { channel: { id } }),
5454
})
55-
const { toggleFollowing, isFollowing } = useHandleFollowChannel(
56-
extendedChannel?.channel.id,
57-
extendedChannel?.channel?.title
58-
)
55+
const { toggleFollowing, isFollowing } = useHandleFollowChannel(channel?.id, channel?.title)
5956

60-
const displayedChannel = overrideChannel ? { channel: overrideChannel } : extendedChannel
57+
const displayedChannel = overrideChannel ? overrideChannel : channel
6158

6259
const handleFollowButtonClick = (e: MouseEvent) => {
6360
e.preventDefault()
@@ -73,7 +70,7 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
7370
withHandle={!hideHandle}
7471
loading={!displayedChannel}
7572
size={avatarSize}
76-
assetUrls={displayedChannel?.channel.avatarPhoto?.resolvedUrls}
73+
assetUrls={displayedChannel?.avatarPhoto?.resolvedUrls}
7774
/>
7875
</StyledLink>
7976
)}
@@ -92,20 +89,19 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
9289
as="span"
9390
color={textSecondary ? 'colorCoreNeutral200' : undefined}
9491
>
95-
{customTitle || displayedChannel.channel.title}
92+
{customTitle || displayedChannel.title}
9693
</ChannelTitle>
9794
{followButton && (
9895
<Text as="p" variant="t100" color="colorText" margin={{ top: 1 }}>
99-
{displayedChannel.channel.followsNum}{' '}
100-
{displayedChannel.channel.followsNum === 1 ? 'follower' : 'followers'}
96+
{displayedChannel.followsNum} {displayedChannel.followsNum === 1 ? 'follower' : 'followers'}
10197
</Text>
10298
)}
10399
</StyledLink>
104100
{followButton && (
105101
<FollowButtonWrapper>
106102
<ProtectedActionWrapper
107103
title="You want to follow this channel?"
108-
description={`Sign in to follow ${displayedChannel.channel.title}`}
104+
description={`Sign in to follow ${displayedChannel.title}`}
109105
>
110106
<Button variant="secondary" onClick={handleFollowButtonClick}>
111107
{isFollowing ? 'Unfollow' : 'Follow'}

‎packages/atlas/src/components/_channel/ChannelWithVideos/ChannelWithVideos.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = memo(({ channelId }
2626
const videoRows = useVideoGridRows('compact')
2727
const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
2828
const {
29-
extendedChannel,
29+
channel,
3030
loading: channelLoading,
3131
error: channelError,
3232
} = useBasicChannel(channelId || '', {
@@ -43,7 +43,7 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = memo(({ channelId }
4343
onError: (error) => SentryLogger.error('Failed to fetch videos', 'ChannelWithVideos', error),
4444
})
4545

46-
const { toggleFollowing, isFollowing } = useHandleFollowChannel(channelId, extendedChannel?.channel?.title)
46+
const { toggleFollowing, isFollowing } = useHandleFollowChannel(channelId, channel?.title)
4747

4848
const targetItemsCount = videosPerRow * videoRows
4949
const displayedVideos = (videos || []).slice(0, targetItemsCount)
@@ -74,24 +74,20 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = memo(({ channelId }
7474
return (
7575
<>
7676
<ChannelCardAnchor to={channelId ? absoluteRoutes.viewer.channel(channelId) : ''}>
77-
<StyledAvatar
78-
size={mdMatch ? 136 : 88}
79-
loading={isLoading}
80-
assetUrls={extendedChannel?.channel.avatarPhoto?.resolvedUrls}
81-
/>
77+
<StyledAvatar size={mdMatch ? 136 : 88} loading={isLoading} assetUrls={channel?.avatarPhoto?.resolvedUrls} />
8278
<InfoWrapper>
8379
{isLoading ? (
8480
<SkeletonLoader width="120px" height="20px" bottomSpace="4px" />
8581
) : (
8682
<ChannelTitle variant="h300" as="h3">
87-
{extendedChannel?.channel?.title}
83+
{channel?.title}
8884
</ChannelTitle>
8985
)}
9086
{isLoading ? (
9187
<SkeletonLoader width="80px" height="20px" bottomSpace="8px" />
9288
) : (
9389
<ChannelFollows as="span" variant="t200" color="colorText">
94-
<NumberFormat as="span" color="colorText" value={extendedChannel?.channel?.followsNum || 0} /> followers
90+
<NumberFormat as="span" color="colorText" value={channel?.followsNum || 0} /> followers
9591
</ChannelFollows>
9692
)}
9793
{isLoading ? (

0 commit comments

Comments
 (0)