Reorder fragments (#833)

* Reorder fragments so that we don't get the EOF error * Create happy-pets-hide.md * remove accidental comment
Shopify · May 1, 2023 · fc3c3eb · fc3c3eb
1 parent d5a7ed0
commit fc3c3eb
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 14 deletions.
diff --git a/.changeset/happy-pets-hide.md b/.changeset/happy-pets-hide.md
@@ -0,0 +1,5 @@
+---
+'demo-store': patch
+---
+
+Move GraphQL fragments from the beginning of the template literal to the end of it, so that we don't get the EOF error in VSCode.
diff --git a/templates/demo-store/app/routes/($lang)._index.tsx b/templates/demo-store/app/routes/($lang)._index.tsx
@@ -180,7 +180,6 @@ export default function Homepage() {
 }
 
 const COLLECTION_CONTENT_FRAGMENT = `#graphql
-  ${MEDIA_FRAGMENT}
   fragment CollectionContent on Collection {
     id
     handle
@@ -206,10 +205,10 @@ const COLLECTION_CONTENT_FRAGMENT = `#graphql
       }
     }
   }
+  ${MEDIA_FRAGMENT}
 `;
 
 const HOMEPAGE_SEO_QUERY = `#graphql
-  ${COLLECTION_CONTENT_FRAGMENT}
   query collectionContent($handle: String, $country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
     hero: collection(handle: $handle) {
@@ -220,21 +219,21 @@ const HOMEPAGE_SEO_QUERY = `#graphql
       description
     }
   }
+  ${COLLECTION_CONTENT_FRAGMENT}
 `;
 
 const COLLECTION_HERO_QUERY = `#graphql
-  ${COLLECTION_CONTENT_FRAGMENT}
   query collectionContent($handle: String, $country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
     hero: collection(handle: $handle) {
       ...CollectionContent
     }
   }
+  ${COLLECTION_CONTENT_FRAGMENT}
 `;
 
 // @see: https://shopify.dev/api/storefront/2023-04/queries/products
 export const HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query homepageFeaturedProducts($country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
     products(first: 8) {
@@ -243,6 +242,7 @@ export const HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;
 
 // @see: https://shopify.dev/api/storefront/2023-04/queries/collections

diff --git a/templates/demo-store/app/routes/($lang).api.products.tsx b/templates/demo-store/app/routes/($lang).api.products.tsx
@@ -62,7 +62,6 @@ export async function loader({request, context: {storefront}}: LoaderArgs) {
 }
 
 const PRODUCTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query (
     $query: String
     $count: Int
@@ -77,6 +76,7 @@ const PRODUCTS_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;
 
 // no-op

diff --git a/templates/demo-store/app/routes/($lang).cart.tsx b/templates/demo-store/app/routes/($lang).cart.tsx
@@ -360,8 +360,6 @@ export async function cartRemove({
 }
 
 const LINES_UPDATE_MUTATION = `#graphql
-  ${LINES_CART_FRAGMENT}
-  ${USER_ERROR_FRAGMENT}
   mutation ($cartId: ID!, $lines: [CartLineUpdateInput!]!, $language: LanguageCode, $country: CountryCode)
   @inContext(country: $country, language: $language) {
     cartLinesUpdate(cartId: $cartId, lines: $lines) {
@@ -373,6 +371,8 @@ const LINES_UPDATE_MUTATION = `#graphql
       }
     }
   }
+  ${LINES_CART_FRAGMENT}
+  ${USER_ERROR_FRAGMENT}
 `;
 
 /**

diff --git a/templates/demo-store/app/routes/($lang).collections.$collectionHandle.tsx b/templates/demo-store/app/routes/($lang).collections.$collectionHandle.tsx
@@ -167,7 +167,6 @@ export default function Collection() {
 }
 
 const COLLECTION_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query CollectionDetails(
     $handle: String!
     $country: CountryCode
@@ -230,6 +229,7 @@ const COLLECTION_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;
 
 function getSortValuesFromParam(sortParam: SortParam | null) {

diff --git a/templates/demo-store/app/routes/($lang).featured-products.tsx b/templates/demo-store/app/routes/($lang).featured-products.tsx
@@ -33,7 +33,6 @@ export async function getFeaturedData(
 }
 
 const FEATURED_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query homepage($country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
     featuredCollections: collections(first: 3, sortKey: UPDATED_AT) {
@@ -55,4 +54,5 @@ const FEATURED_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;
diff --git a/templates/demo-store/app/routes/($lang).products.$productHandle.tsx b/templates/demo-store/app/routes/($lang).products.$productHandle.tsx
@@ -538,8 +538,6 @@ const PRODUCT_VARIANT_FRAGMENT = `#graphql
 `;
 
 const PRODUCT_QUERY = `#graphql
-  ${MEDIA_FRAGMENT}
-  ${PRODUCT_VARIANT_FRAGMENT}
   query Product(
     $country: CountryCode
     $language: LanguageCode
@@ -590,10 +588,11 @@ const PRODUCT_QUERY = `#graphql
       }
     }
   }
+  ${MEDIA_FRAGMENT}
+  ${PRODUCT_VARIANT_FRAGMENT}
 `;
 
 const RECOMMENDED_PRODUCTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query productRecommendations(
     $productId: ID!
     $count: Int
@@ -609,6 +608,7 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;
 
 async function getRecommendedProducts(

diff --git a/templates/demo-store/app/routes/($lang).products._index.tsx b/templates/demo-store/app/routes/($lang).products._index.tsx
@@ -154,7 +154,6 @@ export default function AllProducts() {
 }
 
 const ALL_PRODUCTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query AllProducts(
     $country: CountryCode
     $language: LanguageCode
@@ -175,4 +174,5 @@ const ALL_PRODUCTS_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;
diff --git a/templates/demo-store/app/routes/($lang).search.tsx b/templates/demo-store/app/routes/($lang).search.tsx
@@ -199,7 +199,6 @@ export async function getNoResultRecommendations(
 }
 
 const SEARCH_NO_RESULTS_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
   query searchNoResult(
     $country: CountryCode
     $language: LanguageCode
@@ -224,4 +223,5 @@ const SEARCH_NO_RESULTS_QUERY = `#graphql
       }
     }
   }
+  ${PRODUCT_CARD_FRAGMENT}
 `;