chore: Relay 14 (#5995)

* Update packages

* Relay config

* Add meta.relay to VSCode extensions

* Fix VanityURL

* Add CleanRelayFragment TypeScript helper

* Fix types and queries

.vscode/extensions.json

@@ -1,6 +1,6 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": ["Orta.vscode-ios-common-files", "Orta.vscode-danger", "artsy.artsy-studio-extension-pack"],
+  "recommendations": ["Orta.vscode-ios-common-files", "Orta.vscode-danger", "artsy.artsy-studio-extension-pack", "meta.relay"],
   "unwantedRecommendations": ["prisma.vscode-graphql"]
 }

package.json

@@ -40,7 +40,7 @@
     "prepare": "patch-package && husky install",
     "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx}'",
     "prettier-write": "prettier --write",
-    "relay": "relay-compiler",
+    "relay": "[ -f data/complete.queryMap.json ] || echo '{}' > data/complete.queryMap.json && relay-compiler",
     "setup:artsy": "./scripts/setup-env-for-artsy",
     "setup:oss": "./scripts/setup-env-for-oss",
     "setup:artsy:update!": "scripts/update-env-for-artsy",
@@ -173,7 +173,7 @@
     "react-native-svg": "9.13.3",
     "react-native-view-shot": "3.1.2",
     "react-native-webview": "11.3.1",
-    "react-relay": "12.0.0",
+    "react-relay": "14.0.0",
     "react-spring": "8.0.23",
     "react-tracking": "9.2.0",
     "react-use": "17.1.0",
@@ -252,7 +252,7 @@
     "babel-loader": "8.2.3",
     "babel-plugin-import-graphql": "2.8.1",
     "babel-plugin-module-resolver": "4.1.0",
-    "babel-plugin-relay": "12.0.0",
+    "babel-plugin-relay": "14.0.0",
     "chalk": "2.4.2",
     "check-dependencies": "1.1.0",
     "cheerio": "0.22.0",
@@ -289,12 +289,11 @@
     "react-test-renderer": "17.0.2",
     "recursive-readdir-sync": "1.0.6",
     "redux-flipper": "2.0.1",
-    "relay-compiler": "12.0.0",
-    "relay-compiler-language-typescript": "15.0.1",
+    "relay-compiler": "14.0.0",
     "relay-config": "12.0.1",
     "relay-mock-network-layer": "3.0.0",
-    "relay-runtime": "12.0.0",
-    "relay-test-utils": "12.0.0",
+    "relay-runtime": "14.0.0",
+    "relay-test-utils": "14.0.0",
     "rimraf": "3.0.2",
     "snapshot-diff": "0.2.2",
     "sponge": "0.1.0",

relay.config.js

@@ -3,17 +3,9 @@ module.exports = {
   schema: "./data/schema.graphql",
   language: "typescript",
   artifactDirectory: "./src/__generated__",
-  persistOutput: "./data/complete.queryMap.json",
   exclude: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
-  customScalars: {
-    /**
-     * TODO:
-     *
-     * In reality this could also be a string when the `format` argument is used, but that's currently not done in
-     * Emission and currenty no support exists in relay-compiler to be able to deal with that.
-     *
-     * See https://github.com/facebook/relay/issues/2830
-     */
-    FormattedNumber: "Int",
+  persistConfig: {
+    file: "./data/complete.queryMap.json",
+    algorithm: "MD5",
   },
 }

src/app/AppRegistry.tsx

@@ -98,7 +98,7 @@ import { PrivacyRequest } from "./Scenes/PrivacyRequest"
 import { SaleQueryRenderer, SaleScreenQuery } from "./Scenes/Sale"
 import { SaleFAQ } from "./Scenes/SaleFAQ/SaleFAQ"
 import { SaleInfoQueryRenderer } from "./Scenes/SaleInfo"
-import { SalesQueryRenderer, SalesScreenQuery } from "./Scenes/Sales"
+import { SalesQueryRenderer, SalesScreenQuery } from "./Scenes/Sales/Sales"
 import { SavedAddressesQueryRenderer } from "./Scenes/SavedAddresses/SavedAddresses"
 import { SavedAddressesFormQueryRenderer } from "./Scenes/SavedAddresses/SavedAddressesForm"
 import { EditSavedSearchAlertQueryRenderer } from "./Scenes/SavedSearchAlert/EditSavedSearchAlert"

src/app/Components/ArticleCard.tsx

@@ -1,4 +1,4 @@
-import { ArticleCard_article } from "__generated__/ArticleCard_article.graphql"
+import { ArticleCard_article$data } from "__generated__/ArticleCard_article.graphql"
 import ImageView from "app/Components/OpaqueImageView/OpaqueImageView"
 import { navigate } from "app/navigation/navigate"
 import { Flex, Spacer, Text } from "palette"
@@ -9,7 +9,7 @@ const WIDTH = 295
 const HEIGHT = 230
 
 interface ArticleCardProps extends ViewProps {
-  article: ArticleCard_article
+  article: ArticleCard_article$data
   isFluid?: boolean
   onPress?(event: GestureResponderEvent): void
 }

src/app/Components/Artist/Articles/Articles.tsx

@@ -1,4 +1,4 @@
-import { Articles_articles } from "__generated__/Articles_articles.graphql"
+import { Articles_articles$data } from "__generated__/Articles_articles.graphql"
 import { AboveTheFoldFlatList } from "app/Components/AboveTheFoldFlatList"
 import { ArticleCardContainer } from "app/Components/ArticleCard"
 import { SectionTitle } from "app/Components/SectionTitle"
@@ -8,7 +8,7 @@ import { View } from "react-native"
 import { createFragmentContainer, graphql } from "react-relay"
 
 interface Props {
-  articles: Articles_articles
+  articles: Articles_articles$data
 }
 
 class Articles extends Component<Props> {
@@ -18,7 +18,7 @@ class Articles extends Component<Props> {
     return (
       <View>
         <SectionTitle title="Featured articles" />
-        <AboveTheFoldFlatList<Articles_articles[number]>
+        <AboveTheFoldFlatList<Articles_articles$data[number]>
           horizontal
           showsHorizontalScrollIndicator={false}
           ItemSeparatorComponent={() => <Spacer ml="2" />}

src/app/Components/Artist/ArtistAbout/ArtistAbout.tsx

@@ -1,5 +1,5 @@
 import { ContextModule, OwnerType } from "@artsy/cohesion"
-import { ArtistAbout_artist } from "__generated__/ArtistAbout_artist.graphql"
+import { ArtistAbout_artist$data } from "__generated__/ArtistAbout_artist.graphql"
 import { ArtistSeriesMoreSeriesFragmentContainer } from "app/Scenes/ArtistSeries/ArtistSeriesMoreSeries"
 import { extractNodes } from "app/utils/extractNodes"
 import React from "react"
@@ -15,7 +15,7 @@ import Biography from "../Biography"
 import { ArtistAboutShowsFragmentContainer } from "./ArtistAboutShows"
 
 interface Props {
-  artist: ArtistAbout_artist
+  artist: ArtistAbout_artist$data
 }
 
 export const ArtistAbout: React.FC<Props> = ({ artist }) => {

src/app/Components/Artist/ArtistAbout/ArtistAboutShows.tsx

@@ -1,4 +1,4 @@
-import { ArtistAboutShows_artist } from "__generated__/ArtistAboutShows_artist.graphql"
+import { ArtistAboutShows_artist$data } from "__generated__/ArtistAboutShows_artist.graphql"
 import { navigate } from "app/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { Button, Flex, Spacer, Text } from "palette"
@@ -9,7 +9,7 @@ import { useScreenDimensions } from "shared/hooks"
 import { ArtistShowFragmentContainer } from "../ArtistShows/ArtistShow"
 
 interface Props {
-  artist: ArtistAboutShows_artist
+  artist: ArtistAboutShows_artist$data
 }
 
 const ArtistAboutShows: React.FC<Props> = ({ artist }) => {

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

@@ -1,5 +1,5 @@
 import { OwnerType } from "@artsy/cohesion"
-import { ArtistArtworks_artist } from "__generated__/ArtistArtworks_artist.graphql"
+import { ArtistArtworks_artist$data } from "__generated__/ArtistArtworks_artist.graphql"
 import { ArtworkFilterNavigator, FilterModalMode } from "app/Components/ArtworkFilter"
 import { Aggregations } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
 import {
@@ -29,7 +29,7 @@ import { useTracking } from "react-tracking"
 import { SavedSearchButtonV2 } from "./SavedSearchButtonV2"
 
 interface ArtworksGridProps extends InfiniteScrollGridProps {
-  artist: ArtistArtworks_artist
+  artist: ArtistArtworks_artist$data
   searchCriteria: SearchCriteriaAttributes | null
   relay: RelayPaginationProp
 }