feat: support metaphysics CDN and support cacheable (#10842)

* feat: support metaphysics CDN and support cacheable * chore: strip access token from cacheable requests * chore: remove persistence tests * chore: address review comments * chore: skip CDN for force.true requests * chore: remove unnecessary headers * feat: bring back persisted queries
artsy · Sep 26, 2024 · a4db61f · a4db61f
1 parent f147875
commit a4db61f
Show file tree

Hide file tree

Showing 29 changed files with 494 additions and 60 deletions.
diff --git a/src/app/Components/PrefetchFlashList.tsx b/src/app/Components/PrefetchFlashList.tsx
@@ -57,7 +57,9 @@ export function PrefetchFlashList<ItemType>({
         }
 
         addViewedUrl(url)
-        prefetchUrl(url, variables)
+        prefetchUrl(url, variables, {
+          force: false,
+        })
       })
     },
     []

diff --git a/src/app/Scenes/Articles/Articles.tsx b/src/app/Scenes/Articles/Articles.tsx
@@ -13,7 +13,11 @@ import { useTracking } from "react-tracking"
 import { ArticlesList, ArticlesPlaceholder } from "./ArticlesList"
 
 export const Articles: React.FC = () => {
-  const queryData = useLazyLoadQuery<ArticlesQuery>(ArticlesScreenQuery, articlesQueryVariables)
+  const queryData = useLazyLoadQuery<ArticlesQuery>(ArticlesScreenQuery, articlesQueryVariables, {
+    networkCacheConfig: {
+      force: false,
+    },
+  })
 
   const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment<
     ArticlesQuery,
@@ -78,7 +82,8 @@ export const ArticlesScreen: React.FC = () => {
 }
 
 export const ArticlesScreenQuery = graphql`
-  query ArticlesQuery($count: Int, $after: String, $sort: ArticleSorts, $featured: Boolean) {
+  query ArticlesQuery($count: Int, $after: String, $sort: ArticleSorts, $featured: Boolean)
+  @cacheable {
     ...Articles_articlesConnection
       @arguments(count: $count, after: $after, sort: $sort, featured: $featured)
   }

diff --git a/src/app/Scenes/Artist/Artist.tsx b/src/app/Scenes/Artist/Artist.tsx
@@ -198,7 +198,7 @@ interface ArtistQueryRendererProps {
 }
 
 export const ArtistScreenQuery = graphql`
-  query ArtistAboveTheFoldQuery($artistID: String!, $input: FilterArtworksInput) {
+  query ArtistAboveTheFoldQuery($artistID: String!, $input: FilterArtworksInput) @cacheable {
     artist(id: $artistID) @principalField {
       ...ArtistHeader_artist
       ...ArtistArtworks_artist @arguments(input: $input)
@@ -284,7 +284,7 @@ export const ArtistQueryRenderer: React.FC<ArtistQueryRendererProps> = (props) =
               }}
               below={{
                 query: graphql`
-                  query ArtistBelowTheFoldQuery($artistID: String!) {
+                  query ArtistBelowTheFoldQuery($artistID: String!) @cacheable {
                     artist(id: $artistID) {
                       ...ArtistAbout_artist
                       ...ArtistInsights_artist
@@ -293,6 +293,7 @@ export const ArtistQueryRenderer: React.FC<ArtistQueryRendererProps> = (props) =
                 `,
                 variables: { artistID },
               }}
+              cacheConfig={{ force: false }}
               render={{
                 renderPlaceholder: () => <ArtistSkeleton />,
                 renderComponent: ({ above, below }) => {

diff --git a/src/app/Scenes/Collection/Collection.tsx b/src/app/Scenes/Collection/Collection.tsx
@@ -119,7 +119,15 @@ export const CollectionContent: React.FC<CollectionProps> = ({ collection }) =>
 }
 
 const CollectionQueryRenderer: React.FC<CollectionScreenProps> = ({ collectionID }) => {
-  const data = useLazyLoadQuery<CollectionQuery>(query, { collectionID })
+  const data = useLazyLoadQuery<CollectionQuery>(
+    query,
+    { collectionID },
+    {
+      networkCacheConfig: {
+        force: false,
+      },
+    }
+  )
 
   if (!data?.collection) {
     return null
@@ -174,7 +182,7 @@ const CollectionPlaceholder: React.FC = () => {
 }
 
 const query = graphql`
-  query CollectionQuery($collectionID: String!) {
+  query CollectionQuery($collectionID: String!) @cacheable {
     collection: marketingCollection(slug: $collectionID) @principalField {
       ...Collection_collection
     }

diff --git a/src/app/Scenes/Fair/Fair.tsx b/src/app/Scenes/Fair/Fair.tsx
@@ -143,7 +143,7 @@ const fragment = graphql`
 `
 
 const query = graphql`
-  query FairQuery($fairID: String!) {
+  query FairQuery($fairID: String!) @cacheable {
     fair(id: $fairID) @principalField {
       ...Fair_fair
     }
@@ -155,7 +155,15 @@ interface FairQueryRendererProps {
 }
 
 const FairQueryRenderer: React.FC<FairQueryRendererProps> = ({ fairID }) => {
-  const data = useLazyLoadQuery<FairQuery>(query, { fairID })
+  const data = useLazyLoadQuery<FairQuery>(
+    query,
+    { fairID },
+    {
+      networkCacheConfig: {
+        force: false,
+      },
+    }
+  )
 
   if (!data?.fair) {
     return null

diff --git a/src/app/Scenes/HomeView/HomeView.tsx b/src/app/Scenes/HomeView/HomeView.tsx
@@ -39,7 +39,12 @@ export const HomeView: React.FC = () => {
 
   const queryData = useLazyLoadQuery<HomeViewQuery>(
     homeViewScreenQuery,
-    homeViewScreenQueryVariables()
+    homeViewScreenQueryVariables(),
+    {
+      networkCacheConfig: {
+        force: false,
+      },
+    }
   )
 
   const { data, loadNext, hasNext } = usePaginationFragment<
@@ -195,7 +200,7 @@ const sectionsFragment = graphql`
 `
 
 export const homeViewScreenQuery = graphql`
-  query HomeViewQuery($count: Int!, $cursor: String) {
+  query HomeViewQuery($count: Int!, $cursor: String) @cacheable {
     viewer {
       ...HomeViewSectionsConnection_viewer @arguments(count: $count, cursor: $cursor)
     }

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArticles.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArticles.tsx
@@ -95,7 +95,7 @@ const sectionFragment = graphql`
 `
 
 const homeViewSectionArticlesQuery = graphql`
-  query HomeViewSectionArticlesQuery($id: String!) {
+  query HomeViewSectionArticlesQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionArticles_section
@@ -146,9 +146,17 @@ const HomeViewSectionArticlesPlaceholder: React.FC<FlexProps> = (flexProps) => {
 
 export const HomeViewSectionArticlesQueryRenderer: React.FC<SectionSharedProps> = withSuspense(
   ({ sectionID, index, ...flexProps }) => {
-    const data = useLazyLoadQuery<HomeViewSectionArticlesQuery>(homeViewSectionArticlesQuery, {
-      id: sectionID,
-    })
+    const data = useLazyLoadQuery<HomeViewSectionArticlesQuery>(
+      homeViewSectionArticlesQuery,
+      {
+        id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
+      }
+    )
 
     if (!data.homeView.section) {
       return null

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards.tsx
@@ -171,7 +171,7 @@ const HomeViewSectionArticlesCardsPlaceholder: React.FC<FlexProps> = (flexProps)
 }
 
 const homeViewSectionArticlesCardsQuery = graphql`
-  query HomeViewSectionArticlesCardsQuery($id: String!) {
+  query HomeViewSectionArticlesCardsQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionArticlesCards_section
@@ -186,6 +186,11 @@ export const HomeViewSectionArticlesCardsQueryRenderer: React.FC<SectionSharedPr
       homeViewSectionArticlesCardsQuery,
       {
         id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
       }
     )
 

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionFairs.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionFairs.tsx
@@ -186,7 +186,7 @@ const HomeViewSectionFairsPlaceholder: React.FC<FlexProps> = (flexProps) => {
 }
 
 const homeViewSectionFairsQuery = graphql`
-  query HomeViewSectionFairsQuery($id: String!) {
+  query HomeViewSectionFairsQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionFairs_section
@@ -197,9 +197,17 @@ const homeViewSectionFairsQuery = graphql`
 
 export const HomeViewSectionFairsQueryRenderer: React.FC<SectionSharedProps> = withSuspense(
   ({ sectionID, index, ...flexProps }) => {
-    const data = useLazyLoadQuery<HomeViewSectionFairsQuery>(homeViewSectionFairsQuery, {
-      id: sectionID,
-    })
+    const data = useLazyLoadQuery<HomeViewSectionFairsQuery>(
+      homeViewSectionFairsQuery,
+      {
+        id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
+      }
+    )
 
     if (!data.homeView.section) {
       return null

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx
@@ -189,7 +189,7 @@ const HomeViewSectionFeaturedCollectionPlaceholder: React.FC<FlexProps> = () =>
 }
 
 const homeViewSectionFeaturedCollectionQuery = graphql`
-  query HomeViewSectionFeaturedCollectionQuery($id: String!) {
+  query HomeViewSectionFeaturedCollectionQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionFeaturedCollection_section
@@ -204,6 +204,11 @@ export const HomeViewSectionFeaturedCollectionQueryRenderer: React.FC<SectionSha
       homeViewSectionFeaturedCollectionQuery,
       {
         id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
       }
     )
 

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionGalleries.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionGalleries.tsx
@@ -147,7 +147,7 @@ const HomeViewSectionGalleriesPlaceholder: React.FC<FlexProps> = (flexProps) =>
 }
 
 const homeViewSectionGalleriesQuery = graphql`
-  query HomeViewSectionGalleriesQuery($id: String!) {
+  query HomeViewSectionGalleriesQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionGalleries_section
@@ -158,9 +158,17 @@ const homeViewSectionGalleriesQuery = graphql`
 
 export const HomeViewSectionGalleriesQueryRenderer: React.FC<SectionSharedProps> = withSuspense(
   ({ sectionID, index, ...flexProps }) => {
-    const data = useLazyLoadQuery<HomeViewSectionGalleriesQuery>(homeViewSectionGalleriesQuery, {
-      id: sectionID,
-    })
+    const data = useLazyLoadQuery<HomeViewSectionGalleriesQuery>(
+      homeViewSectionGalleriesQuery,
+      {
+        id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
+      }
+    )
 
     if (!data.homeView.section) {
       return null

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionHeroUnits.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionHeroUnits.tsx
@@ -131,7 +131,7 @@ const HomeViewSectionHeroUnitsPlaceholder: React.FC<FlexProps> = (flexProps) =>
 }
 
 const homeViewSectionHeroUnitsQuery = graphql`
-  query HomeViewSectionHeroUnitsQuery($id: String!) {
+  query HomeViewSectionHeroUnitsQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionHeroUnits_section
@@ -142,9 +142,17 @@ const homeViewSectionHeroUnitsQuery = graphql`
 
 export const HomeViewSectionHeroUnitsQueryRenderer: React.FC<SectionSharedProps> = withSuspense(
   ({ sectionID, index, ...flexProps }) => {
-    const data = useLazyLoadQuery<HomeViewSectionHeroUnitsQuery>(homeViewSectionHeroUnitsQuery, {
-      id: sectionID,
-    })
+    const data = useLazyLoadQuery<HomeViewSectionHeroUnitsQuery>(
+      homeViewSectionHeroUnitsQuery,
+      {
+        id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
+      }
+    )
 
     if (!data.homeView.section) {
       return null

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx
@@ -219,7 +219,7 @@ const HomeViewSectionMarketingCollectionsPlaceholder: React.FC<FlexProps> = (fle
 }
 
 const homeViewSectionMarketingCollectionsQuery = graphql`
-  query HomeViewSectionMarketingCollectionsQuery($id: String!) {
+  query HomeViewSectionMarketingCollectionsQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionMarketingCollections_section
@@ -234,6 +234,11 @@ export const HomeViewSectionMarketingCollectionsQueryRenderer: React.FC<SectionS
       homeViewSectionMarketingCollectionsQuery,
       {
         id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
       }
     )
 

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionSales.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionSales.tsx
@@ -202,7 +202,7 @@ const HomeViewSectionSalesPlaceholder: React.FC<FlexProps> = (flexProps) => {
 }
 
 const homeViewSectionSalesQuery = graphql`
-  query HomeViewSectionSalesQuery($id: String!) {
+  query HomeViewSectionSalesQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionSales_section
@@ -213,9 +213,17 @@ const homeViewSectionSalesQuery = graphql`
 
 export const HomeViewSectionSalesQueryRenderer: React.FC<SectionSharedProps> = withSuspense(
   ({ sectionID, index, ...flexProps }) => {
-    const data = useLazyLoadQuery<HomeViewSectionSalesQuery>(homeViewSectionSalesQuery, {
-      id: sectionID,
-    })
+    const data = useLazyLoadQuery<HomeViewSectionSalesQuery>(
+      homeViewSectionSalesQuery,
+      {
+        id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
+      }
+    )
 
     if (!data.homeView.section) {
       return null

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionShows.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionShows.tsx
@@ -71,7 +71,7 @@ const HomeViewSectionShowsPlaceholder: React.FC<FlexProps> = (flexProps) => {
 }
 
 const homeViewSectionShowsQuery = graphql`
-  query HomeViewSectionShowsQuery($id: String!) {
+  query HomeViewSectionShowsQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionShows_section
@@ -82,9 +82,17 @@ const homeViewSectionShowsQuery = graphql`
 
 export const HomeViewSectionShowsQueryRenderer: React.FC<SectionSharedProps> = withSuspense(
   ({ sectionID, index, ...flexProps }) => {
-    const data = useLazyLoadQuery<HomeViewSectionShowsQuery>(homeViewSectionShowsQuery, {
-      id: sectionID,
-    })
+    const data = useLazyLoadQuery<HomeViewSectionShowsQuery>(
+      homeViewSectionShowsQuery,
+      {
+        id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
+      }
+    )
 
     if (!data.homeView.section) {
       return null

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionViewingRooms.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionViewingRooms.tsx
@@ -136,7 +136,7 @@ const HomeViewSectionArtworksPlaceholder: React.FC<FlexProps> = (flexProps) => {
 }
 
 const homeViewSectionViewingRoomsQuery = graphql`
-  query HomeViewSectionViewingRoomsQuery($id: String!) {
+  query HomeViewSectionViewingRoomsQuery($id: String!) @cacheable {
     homeView {
       section(id: $id) {
         ...HomeViewSectionViewingRooms_section
@@ -151,6 +151,11 @@ export const HomeViewSectionViewingRoomsQueryRenderer: React.FC<SectionSharedPro
       homeViewSectionViewingRoomsQuery,
       {
         id: sectionID,
+      },
+      {
+        networkCacheConfig: {
+          force: false,
+        },
       }
     )