DB refactor [4/n]: switch DB queries to subgraph (#4366)

Co-authored-by: aeolian <[email protected]>

src/components/AccountDashboard/AccountDashboard.tsx

@@ -15,10 +15,11 @@ import WalletContributionCard from 'components/WalletContributionCard'
 import {
   OrderDirection,
   Participant_OrderBy,
+  Project_OrderBy,
+  useProjectsQuery,
   useWalletContributionsQuery,
 } from 'generated/graphql'
 import useMobile from 'hooks/useMobile'
-import { useDBProjectsQuery } from 'hooks/useProjects'
 import {
   useWalletBookmarkedIds,
   useWalletBookmarkedProjects,
@@ -27,15 +28,15 @@ import { useWalletSignIn } from 'hooks/useWalletSignIn'
 import { useWallet } from 'hooks/Wallet'
 import { client } from 'lib/apollo/client'
 import { Profile } from 'models/database'
-import { DBProject } from 'models/dbProject'
+import { SubgraphQueryProject } from 'models/subgraphProjects'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useState } from 'react'
 import { isEqualAddress } from 'utils/address'
 import { ensAvatarUrlForAddress } from 'utils/ens'
 import { etherscanLink } from 'utils/etherscan'
 
-function ProjectsList({ projects }: { projects: DBProject[] }) {
+function ProjectsList({ projects }: { projects: SubgraphQueryProject[] }) {
   const { userAddress } = useWallet()
 
   const { ids: bookmarkedProjectIds } = useWalletBookmarkedIds({
@@ -127,15 +128,22 @@ function ContributedList({ address }: { address: string }) {
 }
 
 function OwnedProjectsList({ address }: { address: string }) {
-  const { data: projects, isLoading } = useDBProjectsQuery({
-    owner: address,
-    orderBy: 'created_at',
-    orderDirection: 'desc',
+  const { data, loading } = useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        owner: address,
+      },
+      orderBy: Project_OrderBy.createdAt,
+      orderDirection: OrderDirection.desc,
+    },
   })
 
+  const projects = data?.projects
+
   const { userAddress } = useWallet()
 
-  if (isLoading) return <Loading />
+  if (loading) return <Loading />
 
   if (!projects || projects.length === 0)
     return (
@@ -191,15 +199,20 @@ function SavedProjectsList({ address }: { address: string }) {
 }
 
 function CreatedProjectsList({ address }: { address: string }) {
-  const { data: projects, isLoading } = useDBProjectsQuery({
-    creator: address,
-    orderBy: 'created_at',
-    orderDirection: 'desc',
+  const { data, loading } = useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        owner: address,
+      },
+    },
   })
 
+  const projects = data?.projects
+
   const { userAddress } = useWallet()
 
-  if (isLoading) return <Loading />
+  if (loading) return <Loading />
 
   if (!projects || projects.length === 0)
     return (

src/components/AccountSettingsDashboard/hooks/useProjectUnwatchCellData.ts

@@ -1,5 +1,7 @@
 import { PV_V2 } from 'constants/pv'
-import { useDBProjectsQuery } from 'hooks/useProjects'
+import { useProjectsQuery } from 'generated/graphql'
+import { client } from 'lib/apollo/client'
+import { SubgraphQueryProject } from 'models/subgraphProjects'
 
 /**
  * Fetches project data from the subgraph, using the project id as a key.
@@ -10,11 +12,16 @@ export const useProjectUnwatchCellData = ({
   projectId,
 }: {
   projectId: number
-}) => {
-  const { data } = useDBProjectsQuery({
-    projectId,
-    pv: [PV_V2],
+}): SubgraphQueryProject | undefined => {
+  const { data } = useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        projectId,
+        pv: PV_V2,
+      },
+    },
   })
 
-  return data?.[0]
+  return data?.projects[0]
 }

src/components/CaseStudies/ReadMoreCaseStudies.tsx

@@ -2,7 +2,8 @@ import { Trans } from '@lingui/macro'
 import { ProjectCarousel } from 'components/Home/ProjectCarousel'
 import { SuccessStoriesCard } from 'components/Home/SuccessStoriesSection/SuccessStoriesCard'
 import { CASE_STUDY_PROJECTS } from 'constants/successStoryProjects'
-import { useDBProjectsQuery } from 'hooks/useProjects'
+import { useProjectsQuery } from 'generated/graphql'
+import { client } from 'lib/apollo/client'
 
 export function ReadMoreCaseStudies({
   currentProject,
@@ -13,14 +14,20 @@ export function ReadMoreCaseStudies({
     p => p.id !== currentProject,
   )
 
-  const { data } = useDBProjectsQuery({
-    ids: otherCaseStudies.map(p => p.id),
+  const { data } = useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        id_in: otherCaseStudies.map(p => p.id),
+      },
+    },
   })
+  const projects = data?.projects
 
   if (!data) return null
 
   const readMoreProjects = CASE_STUDY_PROJECTS.map(p => {
-    const project = data.find(proj => proj.id === p.id)
+    const project = projects?.find(proj => proj.id === p.id)
     if (!project) return
 
     return {

src/components/Home/HomepageProjectCard.tsx

@@ -5,7 +5,7 @@ import ProjectLogo from 'components/ProjectLogo'
 import ETHAmount from 'components/currency/ETHAmount'
 import { PV_V2 } from 'constants/pv'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
-import { DBProject } from 'models/dbProject'
+import { SubgraphQueryProject } from 'models/subgraphProjects'
 import { v2v3ProjectRoute } from 'utils/routes'
 
 function Statistic({
@@ -42,14 +42,8 @@ export function HomepageProjectCard({
   lazyLoad,
 }: {
   project: Pick<
-    DBProject,
-    | 'terminal'
-    | 'metadataUri'
-    | 'volume'
-    | 'paymentsCount'
-    | 'handle'
-    | 'pv'
-    | 'projectId'
+    SubgraphQueryProject,
+    'metadataUri' | 'volume' | 'paymentsCount' | 'handle' | 'pv' | 'projectId'
   >
   lazyLoad?: boolean
 }) {

src/components/Home/JuicyPicksSection/JuicyPicksSection.tsx

@@ -9,13 +9,22 @@ import { SectionContainer } from 'components/Home/SectionContainer'
 import { SectionHeading } from 'components/Home/SectionHeading'
 import { XLButton } from 'components/buttons/XLButton'
 import { useMedia } from 'contexts/Theme/useMedia'
+import { Project } from 'generated/graphql'
 import Link from 'next/link'
+import { JUICY_PICKS_PROJECT_IDS } from './constants'
 
 export function JuicyPicksSection() {
-  const { data: projects } = useFetchJuicyPicks()
+  const juicyPicksQuery = useFetchJuicyPicks()
 
   const isCarouselBreakpoint = useMedia('(max-width: 1079px)')
 
+  // ensure list sorted by JUICY_PICKS_PROJECT_IDS array order
+  const projects = JUICY_PICKS_PROJECT_IDS.map(projectId => {
+    return juicyPicksQuery.data?.projects.find(
+      project => project.projectId === projectId,
+    ) as Project | undefined
+  }).filter((p): p is Project => !!p)
+
   if (!projects) {
     return null
   }

src/components/Home/JuicyPicksSection/SpotlightProjectCard.tsx

@@ -9,9 +9,9 @@ import Paragraph from 'components/Paragraph'
 import ProjectLogo from 'components/ProjectLogo'
 import { TRENDING_WINDOW_DAYS } from 'components/Projects/RankingExplanation'
 import ETHAmount from 'components/currency/ETHAmount'
+import { Project } from 'generated/graphql'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useProjectTrendingPercentageIncrease } from 'hooks/useProjects'
-import { DBProject } from 'models/dbProject'
 import Link from 'next/link'
 import { twJoin } from 'tailwind-merge'
 import { ipfsUriToGatewayUrl } from 'utils/ipfs'
@@ -36,7 +36,7 @@ function Statistic({
   )
 }
 
-export function SpotlightProjectCard({ project }: { project: DBProject }) {
+export function SpotlightProjectCard({ project }: { project: Project }) {
   const { data: metadata } = useProjectMetadata(project.metadataUri)
 
   const percentageGain = useProjectTrendingPercentageIncrease({

src/components/Home/JuicyPicksSection/hooks/useJuicyPicks.ts

@@ -1,29 +1,18 @@
 import { JUICY_PICKS_PROJECT_IDS } from 'components/Home/JuicyPicksSection/constants'
 import { PV_V2 } from 'constants/pv'
-import { useDBProjectsQuery } from 'hooks/useProjects'
-import { DBProject } from 'models/dbProject'
+import { useProjectsQuery } from 'generated/graphql'
+import { client } from 'lib/apollo/client'
 import { getSubgraphIdForProject } from 'utils/graph'
 
 export function useFetchJuicyPicks() {
-  const res = useDBProjectsQuery({
-    ids: JUICY_PICKS_PROJECT_IDS.map(projectId =>
-      getSubgraphIdForProject(PV_V2, projectId),
-    ),
+  return useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        id_in: JUICY_PICKS_PROJECT_IDS.map(projectId =>
+          getSubgraphIdForProject(PV_V2, projectId),
+        ),
+      },
+    },
   })
-
-  if (!res.data) {
-    return res
-  }
-
-  // ensure list sorted by JUICY_PICKS_PROJECT_IDS array order
-  const sortedPicks = JUICY_PICKS_PROJECT_IDS.map(projectId => {
-    return res.data?.find(project => project.projectId === projectId) as
-      | DBProject
-      | undefined
-  }).filter((p): p is DBProject => !!p)
-
-  return {
-    ...res,
-    data: sortedPicks,
-  }
 }

src/components/Home/SuccessStoriesSection/SuccessStoriesCard.tsx

@@ -4,7 +4,6 @@ import { Badge } from 'components/Badge'
 import ETHAmount from 'components/currency/ETHAmount'
 import ProjectLogo from 'components/ProjectLogo'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
-import { DBProject } from 'models/dbProject'
 import { ProjectTagName, projectTagText } from 'models/project-tags'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -14,6 +13,7 @@ import {
   HOMEPAGE_CARD_BORDER,
   HOMEPAGE_CARD_BORDER_HOVER,
 } from 'components/Home/HomepageCard'
+import { SubgraphQueryProject } from 'models/subgraphProjects'
 
 function SuccessStoriesCardTag({ tag }: { tag: ProjectTagName }) {
   const text = projectTagText[tag]()
@@ -33,7 +33,7 @@ export function SuccessStoriesCard({
   nameOverride,
   imageOverride,
 }: {
-  project: DBProject
+  project: SubgraphQueryProject
   tags: ProjectTagName[]
   nameOverride?: string
   imageOverride?: string

src/components/Home/SuccessStoriesSection/SuccessStoriesSection.tsx

@@ -6,20 +6,27 @@ import { SuccessStoriesCard } from 'components/Home/SuccessStoriesSection/Succes
 import { XLButton } from 'components/buttons/XLButton'
 import { CASE_STUDY_PROJECTS } from 'constants/successStoryProjects'
 import { useMedia } from 'contexts/Theme/useMedia'
-import { useDBProjectsQuery } from 'hooks/useProjects'
+import { useProjectsQuery } from 'generated/graphql'
+import { client } from 'lib/apollo/client'
 import Link from 'next/link'
 
 export function SuccessStoriesSection() {
-  const { data } = useDBProjectsQuery({
-    ids: CASE_STUDY_PROJECTS.map(p => p.id),
+  const { data } = useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        id_in: CASE_STUDY_PROJECTS.map(p => p.id),
+      },
+    },
   })
+  const projects = data?.projects
 
   const isXl = useMedia('(min-width: 1280px)')
 
   if (!data) return null
 
   const topProjects = CASE_STUDY_PROJECTS.map(p => {
-    const project = data.find(proj => proj.id === p.id)
+    const project = projects?.find(proj => proj.id === p.id)
     if (!project) return
 
     return {

src/components/Home/TopSection/TopSection.tsx

@@ -12,11 +12,12 @@ import { ProjectTag } from 'components/ProjectTags/ProjectTag'
 import { XLButton } from 'components/buttons/XLButton'
 import { HOMEPAGE } from 'constants/fathomEvents'
 import { PV_V1 } from 'constants/pv'
+import { useProjectsQuery } from 'generated/graphql'
 import {
   DEFAULT_TRENDING_PROJECTS_LIMIT,
-  useDBProjectsQuery,
   useTrendingProjects,
 } from 'hooks/useProjects'
+import { client } from 'lib/apollo/client'
 import { trackFathomGoal } from 'lib/fathom'
 import { ProjectTagName } from 'models/project-tags'
 import Link from 'next/link'
@@ -42,9 +43,16 @@ export function TopSection() {
   const { data: trendingProjects, isLoading } = useTrendingProjects(
     DEFAULT_TRENDING_PROJECTS_LIMIT,
   )
-  const { data: backupProjects } = useDBProjectsQuery({
-    ids: BACKUP_PROJECTS,
+
+  const { data } = useProjectsQuery({
+    client,
+    variables: {
+      where: {
+        id_in: BACKUP_PROJECTS,
+      },
+    },
   })
+  const backupProjects = data?.projects
 
   const remainderProjectCount =
     DEFAULT_TRENDING_PROJECTS_LIMIT - (trendingProjects?.length ?? 0)

src/components/ProjectCard.tsx

@@ -10,7 +10,7 @@ import { v2v3ProjectRoute } from 'utils/routes'
 
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useSubtitle } from 'hooks/useSubtitle'
-import { DBProject } from 'models/dbProject'
+import { SubgraphQueryProject } from 'models/subgraphProjects'
 import { ArchivedBadge } from './ArchivedBadge'
 import Loading from './Loading'
 import ProjectLogo from './ProjectLogo'
@@ -21,7 +21,7 @@ export default function ProjectCard({
   project,
   bookmarked,
 }: {
-  project?: DBProject
+  project?: SubgraphQueryProject
   bookmarked?: boolean
 }) {
   const { data: metadata } = useProjectMetadata(project?.metadataUri)
@@ -34,7 +34,8 @@ export default function ProjectCard({
 
   if (!project) return null
 
-  const { volume, pv, handle, projectId, tags, createdAt } = project
+  const { volume, pv, handle, projectId, createdAt } = project
+  const tags = metadata?.tags
 
   // If the total paid is greater than 0, but less than 10 ETH, show two decimal places.
   const precision = volume?.gt(0) && volume.lt(constants.WeiPerEther) ? 2 : 0