Vite Migration

Shopify Hydrogen introduced stable support for Vite with the 2025.4.0 version, in replacement of the legacy Remix compiler. The migration has been opt in only since, but is now required if a store wants to use version 2025.5.0, which officially adopts React Router 7 and requires a store be on Vite.

Things to Consider

The first two tasks are required for a store to launch and for localhost to run. Other tasks have an associated priority level, that are technically opt in, but are still highly recommended to be done to prevent negative developer experience side effects from the migration.

After every task, ensure localhost launches and runs as expected. Address any server or client side errors accordingly. Do not go live without proper QA of the migration.

For every task under Manual Setup , there is a corresponding prompt under A.I. Prompts that may be passed into an LLM for automating each task. These prompts have been tested internally using the IDE Cursor. Going this route will require some baseline knowledge of using Cursor's AI. Adjust chat settings accordingly:

  1. Turn on Agent mode
  2. Turn on Auto-Run Mode to allow agent to write files without asking for permission each time

Note, every prompt is still subject to the following from the chat:

  • Ask for approval in chunks
  • Claim it has finished the task, but on review has still missed action items or has not done a 100% search of the codebase for the instances to change. In that case, prompt the chat that it has not actually finished the job and monitor accordingly

If you are unsure if the A.I. has finished the job completely, reference the manual setup steps and cross reference with what was done from the chat.

Manual Setup

Vite Configuration

Priority: Required

  1. Add vite.config.ts to the root of the repo
import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.v3preset()],
      ignoredRouteFiles: ['**/.*'],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_lazyRouteDiscovery: true,
        v3_singleFetch: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    optimizeDeps: {
      include: [
        '@headlessui/react',
        '@remix-run/dev/server-build',
        'cookie',
        'crypto-js/aes',
        'crypto-js/core',
        'debug',
        'fast-deep-equal',
        'lodash/debounce',
        'lodash/kebabCase',
        'lodash/snakeCase',
        'lodash/startCase',
        'react-markdown',
        'remark-breaks',
        'remark-gfm',
        'snakecase-keys',
        'uuid',
      ],
    },
  },
  optimizeDeps: {
    include: [
      '@headlessui/react',
      '@pack/react',
      '@shopify/hydrogen-react',
      'react-intersection-observer',
      'swiper/modules',
      'swiper/react',
    ],
  },
  build: {
    // Allow a strict Content-Security-Policy
    // withtout inlining assets as base64:
    assetsInlineLimit: 0,
  },
});
  1. Delete remix.config.js from the root
  2. Update package.json accordingly, if not already the case:
    1. Add to root of file: 
      ”type”: “module”
    2. Update or add following packages under dependencies 
      "@remix-run/react": "^2.16.5",
"@shopify/cli": "^3.78.1",
"@shopify/cli-hydrogen": "9.0.8",
"@shopify/hydrogen": "2025.1.3",
"@shopify/hydrogen-react": "2025.1.3",
"@shopify/mini-oxygen": "3.1.1",
"@shopify/remix-oxygen": "^2.0.12",
    3. Update or add following packages under devDependencies 
      "@remix-run/dev": "^2.16.5",
"@remix-run/eslint-config": "^2.16.5",
"@remix-run/fs-routes": "^2.16.7",
"@remix-run/route-config": "^2.16.7",
"@shopify/eslint-plugin": "^48.0.2",
"@shopify/hydrogen-codegen": "^0.3.2",
"@shopify/oxygen-workers-types": "^4.1.6",
"@shopify/prettier-config": "^1.1.4",
"eslint-plugin-react-refresh": "0.4.19",
"vite": "5.4.11",
"vite-tsconfig-paths": "^5.1.4"
    4. Run npm install
  3. Rename postcss.config.js to postcss.config.cjs
  4. Rename .eslintrc.js to .eslintrc.cjs
  5. Rename remix.env.d.ts to env.d.ts, then delete /// <reference types="@remix-run/dev" /> at the top of the file
  6. In tailwind.config.js:
    1. Change line module.exports = { to export default {
    2. Add /** @type {import('tailwindcss').Config} */ above the export default
    3. Add import headlessuiPlugin from '@headlessui/tailwindcss’; at the top, then replace plugins: [require('@headlessui/tailwindcss’)], with plugins: [headlessuiPlugin],
  7. In server.ts:
    1. Change import * as remixBuild from '@remix-run/dev/server-build’; to import * as remixBuild from 'virtual:remix/server-build’;
    2. Add the comment @ts-ignore above it
  8. In tsconfig.json:
    1. Add "vite/client” to the ”types” array
    2. Update "moduleResolution”to”Bundler”, i.e. "moduleResolution": "Bundler"
    3. Add “module”: "ESNext” to the root
  9. In root.tsx change import styles from '~/styles/app.css’; to import styles from '~/styles/app.css?url’;
  10. In Document.tsx:
    1. Remove <LiveReload /> in the html
    2. Update the fallback for the <ShopifyProvider> prop storefrontApiVersion to 2025-01
  11. Add /* @vite-ignore */ to all import(<path or url>). For Blueprint, these are the use cases:
    1. In useCountriesList.ts, add /* @vite-ignore */ inside the import for import('country-region-data/data.json’) e.g. import(/* @vite-ignore */ 'country-region-data/data.json’)
    2. In ElevarEvents.tsx, add /* @vite-ignore */ inside the imports for import('https://shopify-gtm-suite.getelevar.com/configs/${elevarSigningKey}/config.js') and import(scriptUrl))

Important:

After this Vite configuration, launch the store on localhost to address any MiniOxygen errors that will now likely occur. Usually errors will either mention something like ReferenceError: exports is not defined and point to a package, or the error will show a stack trace which also points to a package. In either case, the solution is most likely these packages need to be added to the ssr>optimizeDeps>include array in vite.config.ts. The errors will likely be displayed both client side and in the terminal.

In the terminal, there is chance it also says something like Failed to resolve dependency: <dependency name goes here>, present in 'ssr.optimizeDeps.include’; in that case delete that dependency from the list in the vite config

Relevant Blueprint release commits:

Only use Blueprint commits as references, as some may be incomplete, outdated, or include unrelated changes to the task. Refer to the steps outlined above.

Server Function Imports Update

Priority: Required

Purpose: With Vite, the client is not allowed to access files with .server suffixed to its name, e.g. product.server.ts. Solution is to remove the exports of .server files from index files and instead use direct imports.

  1. Delete the index file in the app/lib/customer/servers folder

  2. Remove the line export * from './servers’ in the index file in the app/lib/customer folder

  3. Update the imports for all the Action and Loader functions that were originally being imported from '~/lib/customer'. List of each file and what the updated import looks like:

    • In root.tsx:
      • import {customerGetAction} from '~/lib/customer/servers/customer.server';
    • In ($locale).account.activate.$id.$activationToken.tsx:
      • import {customerActivateAction} from '~/lib/customer/servers/activate.server';
    • In ($locale).account.addresses.tsx:
      • import {customerAddressesAction, customerAddressesLoader} from '~/lib/customer/servers/addresses.server';
    • In ($locale).account.login.tsx:
      • import {customerLoginRegisterAction} from '~/lib/customer/servers/login-register.server';
    • In ($locale).account.orders._index:
      • import {customerOrdersAction, customerOrdersLoader} from '~/lib/customer/servers/orders.server';
    • In ($locale).account.orders.$id.tsx:
      • import {customerOrderAction, customerOrderLoader} from '~/lib/customer/servers/order.server';
    • In ($locale).account.profile.tsx:
      • import {customerUpdateProfileAction} from '~/lib/customer/servers/profile.server';
    • In ($locale).account.register.tsx:
      • import {customerLoginRegisterAction} from '~/lib/customer/servers/login-register.server';
    • In ($locale).account.reset.$id.$resetToken:
      • import {customerPasswordResetAction} from '~/lib/customer/servers/reset.server';
    • In ($locale).account.tsx: import {customerGetAction} from '~/lib/customer/servers/customer.server';

  4. In the index file in the app/lib/multipass folder:

    1. Delete export {Multipassify} from './multipassify.server’;
    2. In ($locale).account.login.multipass.tsx update import to import {Multipassify} from '~/lib/multipass/multipassify.server';

Relevant Blueprint release commits:

Only use Blueprint commits as references, as some may be incomplete, outdated, or include unrelated changes to the task. Refer to the steps outlined above.

Component Imports Update

Priority: High

Purpose: Removing the index.ts file from the app/components folder is crucial to prevent any HMR (hot module replacement) errors from occurring with Vite with Hydrogen while in development. All imports from '~/components' now need to be direct imports.

HMR errors will make the dev experience frustrating, such as needing to restart the server to see changes.

  1. Delete the index.ts file from the app/components folder
  2. Go through every file in the codebase and change any imports from '~/components' to direct imports; such as changing:
import {Image, Link, LoadingDots, Spinner} from ‘~/components’;

to:

import {Image} from ‘~/components/Image’;
import {Link} from ‘~/components/Link’;
import {LoadingDots, Spinner} from ‘~/components/Animations’;

Note: An easy way to search for these imports is to search exactly for either '~/components' or '~/components/' with the quotations included.

Relevant Blueprint release commits:

Only use Blueprint commits as references, as some may be incomplete, outdated, or include unrelated changes to the task. Refer to the steps outlined above.

Graphql Query Updates

Priority: Medium

Purpose: Reorganizing where Graphql queries live and how they get imported into files is another way to prevent/limit any HMR (hot module replacement) errors from occurring with Vite with Hydrogen while in development. If this is not done, there is a higher likelihood editing any Graphql queries won't result in a hot reload and localhost will need to be restarted after each edit

  1. In the app/data folder, create a new folder named graphql
  2. In the graphql folder, create a new folder named pack, that contains the following files: article-page.ts, blog-page.ts, collection-page.ts, page.ts, product-page.ts, settings.ts
  3. In the graphql folder, create a new folder named storefront that contains the following files: cart.ts, collection.ts, product.ts, search.ts, sellingPlans.ts, shop.ts
  4. In the app/data/queries folder, do the following with each file. Ensure when pasting in content, you carry over any necessary imports
    1. pack.queries.ts: copy all content and paste in settings.ts in /graphql/pack folder
    2. article.queries.ts: copy all content and paste in article-page.ts in /graphql/pack folder
    3. blog.queries.ts: copy all content and paste in blog-page.ts in /graphql/pack folder
    4. cart.queries.ts: copy all content and paste in cart.ts in /graphql/storefront folder
    5. collection.queries.ts: copy all content under the comment BACKPACK API QUERIES and paste in collection-page.ts in /graphql/pack folder; then copy all content under the comment STOREFRONT API QUERIES and paste into collection.ts in /graphql/storefront folder
    6. product.queries.ts: copy all content under the comment BACKPACK API QUERIES and paste in product-page.ts in /graphql/pack folder; then copy all content under the comment STOREFRONT API QUERIES and paste in product.ts in /graphql/storefront folder
    7. search.queries.ts: copy all content and paste in search.ts in /graphql/storefront folder
    8. sellingPlans.queries.ts: copy all content and paste in sellingPlans.ts in /graphql/storefront folder
    9. shop.queries.ts: copy all content and paste in shop.ts in /graphql/storefront folder
    10. page.queries.ts: copy all content and paste in page.ts in /graphql/pack folder
  5. Delete the index file in app/data/queries folder
  6. Search the codebase for instances of imports of all the queries/fragments from all the new files, and correct them to be direct imports, e.g. import {PRODUCT_QUERY} from '~/data/graphql/storefront/product';
    • Note, an easy way to search for these imports is to search exactly for either '~/data/queries' or '~/data/queries/' with the quotations included.
  7. Delete the app/data/queries folder
  8. Find where COLLECTION_FILTERS_QUERY and PRODUCTS_SEARCH_FILTERS_QUERY are being imported and used, and instead place in the actual query string where the variable is being used. Ensure the product search filters query is named ProductsSearchFilters and the collection filters query is named CollectionFilters
  9. Remove METAFIELD_FRAGMENT and PRODUCT_METAFIELDS_QUERY from the new product.ts file, if they exist

Relevant Blueprint release commits:

Only use Blueprint commits as references, as some may be incomplete, outdated, or include unrelated changes to the task. Refer to the steps outlined above.

Context Imports Update

Priority: Low

Purpose: Vite uses React Fast Refresh for HMR and a rule is that .tsx files must only return components for HMR to work with that file.

  1. In the app/contexts folder, create folders with the same name of each Provider file, and move the Provider file into the new folder, e.g. for GlobalProvider.tsx file create a folder named GlobalProvider and move the file into this folder
  2. In each folder create a new file of the name of the useContext hook exported at the end of each Provider file. For example in GlobalProvider.tsx, there is a hook exported called useGlobalContext, so create a file called useGlobalContext.ts
  3. In each hook file, carry over the const Context variable and the hook from the main Provider file. Ensure Context is exported. Then in the Provider file, delete the exported hook at the end, and delete the const Context and instead import from the hook file. Examples:

useGlobalContext.ts

import {createContext, useContext} from 'react';

import type {GlobalContext} from '~/lib/types';

export const Context = createContext({state: {}, actions: {}} as GlobalContext);

export const useGlobalContext = () => useContext(Context) as GlobalContext;

GlobalProvider.tsx

/* imports... */
import {Context} from './useGlobalContext';

...

export function GlobalProvider({children}: {children: ReactNode}) {
  ...
  return {children};
}
  1. Remove the index file in the app/contexts folder
  2. Search the codebase for instances of imports of the provider hooks, e.g. useGlobalContext, and correct them to be direct imports, e.g. import {useGlobalContext} from '~/contexts/GlobalProvider/useGlobalContext';
    • Note, an easy way to search for these imports is to search exactly for either '~/contexts' or '~/contexts/' with the quotations included.
  3. Search the codebase for instances of imports of the Providers, e.g. GlobalProvider, and correct them to be direct imports, e.g. import {GroupingsProvider} from '~/contexts/GroupingsProvider/GroupingsProvider';
    • Note, if app/contexts has a ContextsProvider.tsx, this step is likely not necessary

Relevant Blueprint release commits:

Only use Blueprint commits as references, as some may be incomplete, outdated, or include unrelated changes to the task. Refer to the steps outlined above.

Misc Recommended Updates

Priority: Low

Purpose: Misc Blueprint updates from previous releases that may be beneficial, if not already implemented

  1. In.eslintrc.cjs:
    1. Add 'plugin:prettier/recommended’ to the extends array
    2. Add to root of file:
    plugins: ['react-refresh’]
    1. Add the following rule into the rules array:
    'react-refresh/only-export-components': [
  'error',
  {
    allowExportNames: [
      'meta',
      'links',
      'headers',
      'loader',
      'action',
      'shouldRevalidate',
    ],
  },
],
  2. In package.json:
    1. Add to root of file: 
      "optionalDependencies": {
  "@rollup/rollup-linux-x64-gnu": "4.40.0"
}

Relevant Blueprint release commits:

Only use Blueprint commits as references, as some may be incomplete, outdated, or include unrelated changes to the task. Refer to the steps outlined above.

A.I. Prompts

Vite Configuration

Prompt:

1. Delete `remix.config.js` from the root
2. Add `vite.config.ts` to the root of the repo:
/* Code starts below. Do not include this line */
import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.v3preset()],
      ignoredRouteFiles: ['**/.*'],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_lazyRouteDiscovery: true,
        v3_singleFetch: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    optimizeDeps: {
      include: [
        '@headlessui/react',
        '@remix-run/dev/server-build',
        'cookie',
        'crypto-js/aes',
        'crypto-js/core',
        'debug',
        'fast-deep-equal',
        'lodash/debounce',
        'lodash/kebabCase',
        'lodash/snakeCase',
        'lodash/startCase',
        'react-markdown',
        'remark-breaks',
        'remark-gfm',
        'snakecase-keys',
        'uuid',
      ],
    },
  },
  optimizeDeps: {
    include: [
      '@headlessui/react',
      '@pack/react',
      '@shopify/hydrogen-react',
      'react-intersection-observer',
      'swiper/modules',
      'swiper/react',
    ],
  },
  build: {
    // Allow a strict Content-Security-Policy
    // withtout inlining assets as base64:
    assetsInlineLimit: 0,
  },
});
/* Code ends above. Do not include this line */
3.  Update `package.json` accordingly, if not already the case:
    1.  Add `”type”: “module”,` below `”version:”`
    2.  Add below and place below `"devDependencies"`:
        /* Code starts below. Do not include this line */
        "optionalDependencies": {
          "@rollup/rollup-linux-x64-gnu": "4.40.0"
        },
        /* Code ends above. Do not include this line */
    3.  Update or add following packages under `"dependencies"`
        - "@remix-run/react": "^2.16.5",
        - "@shopify/cli": "^3.78.1",
        - "@shopify/cli-hydrogen": "9.0.8",
        - "@shopify/hydrogen": "2025.1.3",
        - "@shopify/hydrogen-react": "2025.1.3",
        - "@shopify/mini-oxygen": "3.1.1",
        - "@shopify/remix-oxygen": "^2.0.12",
    4.  Update or add following packages under `"devDependencies"`
        - "@remix-run/dev": "^2.16.5",
        - "@remix-run/eslint-config": "^2.16.5",
        - "@remix-run/fs-routes": "^2.16.7",
        - "@remix-run/route-config": "^2.16.7",
        - "@shopify/eslint-plugin": "^48.0.2",
        - "@shopify/hydrogen-codegen": "^0.3.2",
        - "@shopify/oxygen-workers-types": "^4.1.6",
        - "@shopify/prettier-config": "^1.1.4",
        - "eslint-plugin-react-refresh": "0.4.19",
        - "vite": "5.4.11",
        - "vite-tsconfig-paths": "^5.1.4"
    5.  Run `npm install`
4.  Create a file in the root called `postcss.config.cjs` and paste in the below code. Then after delete `postcss.config.js`
    /* Code starts below. Do not include this line */
    module.exports = {
      plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
        'postcss-preset-env': {
          features: {'nesting-rules': false},
      },
      },
    };
    /* Code ends above. Do not include this line */
5.  Create a file in the root called `.eslintrc.cjs`, and copy and paste all the content from `.eslintrc.js`; then delete `.eslintrc.js`
6.  In `server.ts` change `import * as remixBuild from '@remix-run/dev/server-build’;` to `import * as remixBuild from 'virtual:remix/server-build’;` and add the comment `@ts-ignore` above it
7.  In `remix.env.d.ts` delete `/// <reference types="@remix-run/dev" />` at the top
8.  In `tailwind.config.js` change line `module.exports = {` to `export default {` and add `/** @type {import('tailwindcss').Config} */` above it. Also add `import headlessuiPlugin from '@headlessui/tailwindcss’;` at the top, then replace `plugins: [require('@headlessui/tailwindcss’)],` with `plugins: [headlessuiPlugin],`
9. In `root.tsx` change `import styles from '~/styles/app.css’;` to `import styles from '~/styles/app.css?url’;`
10. In `Document.tsx` remove the import for `LiveReload` and remove `<LiveReload /> in the html. Also update the fallback `storefrontApiVersion`, which is a prop passed into `ShopifyProvider`, from whatever it is to `2025-01`
11. In `tsconfig.json` add `"vite/client”` at the front of the array for `”types”. Also update `"moduleResolution”`to`”Bundler”`and add `“module”: "ESNext”,` above `“target”:`
12. In `useCountriesList.ts` in hooks folder, add `/* @vite-ignore */` inside the import for `import('country-region-data/data.json’)`
13. If `ElevarEvents.tsx` exists, which would be found either in /components/PackAnalytics or /components/Analytics, add `/* @vite-ignore */` inside the imports for “import(`https://shopify-gtm-suite.getelevar.com/configs/${elevarSigningKey}/config.js`)” and `import(scriptUrl))`

Server Function Imports Update

Prompt:

1. Delete the index file from app/lib/customer/servers folder
2. Remove the `export * from './servers’` in the index file in the app/lib/customer folder
3. Read all the exported functions from files in the app/lib/customer/servers folder and find where they are being imported across the codebase, and correct them to be direct imports. Note, they will most likely be imported from '~/lib/customer'
4. In the index file in app/lib/multipass, delete `export {Multipassify} from './multipassify.server’;` and ensure the import for Multipassify is corrected accordingly in `($locale).account.login.multipass`

Component Imports Update

Prompt:

1. Remove the `index.ts` file from the `app/components` folder
2. Go through every file in the codebase and change any imports from `~/components or '~/components/' to direct imports, such as changing:

`import {Image, Link, LoadingDots, Spinner, Svg} from ‘~/components’;`

to:

`
import {Image} from ‘~/components/Image’;
import {Link} from ‘~/components/Link’;
import {LoadingDots, Spinner} from ‘~/components/Animations’;
import {Svg} from ‘~/components/Svg’;
`

Keep these in mind before starting the job:
- An easy way to know if a file needs an update on an import is if the import is from ‘~/components’ or '~/components/' only
- If a file is exported from an `index.ts` file from the folder it's in, you can shorten the import, such as `import {Svg} from '~/components/Svg/Svg';` can just be `import {Svg} from '~/components/Svg';` only because the `Svg` file is exported from an index file in the `Svg` folder.
- Check files in ‘/components’, ‘/sections’, ‘/routes’, and ‘root.tsx’. After processing those folders, you can check the rest of the codebase for any other instances not in those folders
- Do not stray away from this prompt, for example, if you are adding, removing, or editing any imports that are not from ‘~/components’ you are straying away from the prompt
- You do not need to ask for approval in batches, you can just run all the jobs at once

Context Imports Update

Prompt:

1. In the app/contexts folder, create folders with the same name of each Provider file, and move the Provider file into the new folder, e.g. for `GlobalProvider.tsx` file create a folder named `GlobalProvider` and move the file into this folder
2. In each folder create a new file of the name of the `useContext` hook exported at the end of each Provider file, for example for the `GlobalProvider` folder, there is a hook exported called `useGlobalContext` at the end
3. In each hook file, carry over the `const Context` variable and the hook from the main Provider file. Ensure `Context` is exported. Then in the Provider file, delete the exported hook at the end, and delete the `const Context` and instead import from the hook file
4. Ensure removing any unnecessary imports in all the files under the app/contexts folder
5. Remove the index file in the app/contexts folder
6. Search the codebase for instances of imports of the provider hooks, e.g. `useGlobalContext`, and correct them to be direct imports. They’ll likely be imported from ‘~/contexts’
7. Search the codebase for instances of imports of the Providers, e.g. `GlobalProvider`, and correct them to be direct imports. They’ll likely be imported from ‘~/contexts’

Graphql Query Updates

Prompt:

1. Delete the index file in app/data/queries folder
2. In the app/data folder, create a new folder named “graphql”
3. In the graphql folder, create a new folder named “pack”, that contains the following files: “article-page.ts”, “blog-page.ts”, “collection-page.ts”, “page.ts”, “product-page.ts”, “settings.ts”
4. In the graphql folder, create a new folder named “storefront” that contains the following files: “cart.ts”, “collection.ts”, “product.ts”, “search.ts”, “sellingPlans.ts”, shop.ts”
5. In the app/data/queries folder, do the following with each file. Ensure when pasting in content, you carry over any necessary imports
    1. “pack.queries.ts”: copy all content and paste in graphql/pack/settings.ts
    2. “article.queries.ts”: copy all content and paste in graphql/pack/article-page.ts
    3. “blog.queries.ts”: copy all content and paste in graphql/pack/blog-page.ts
    4. “cart.queries.ts”: copy all content and paste in graphql/storefront/cart.ts
    5. “collection.queries.ts”: copy all content under the comment “BACKPACK API QUERIES” and paste into graphql/pack/collection-page.ts; copy all content under the comment “STOREFRONT API QUERIES” and paste into graphql/storefront/collection.ts
    6. “product.queries.ts”: copy all content under the comment “BACKPACK API QUERIES” and paste into graphql/pack/product-page.ts; copy all content under the comment “STOREFRONT API QUERIES” and paste into graphql/storefront/product.ts
    7. “search.queries.ts”: copy all content and paste in graphql/storefront/search.ts
    8. “sellingPlans.queries.ts”: copy all content and paste in graphql/storefront/sellingPlans.ts
    9. “shop.queries.ts”: copy all content and paste in graphql/storefront/shop.ts
    10. “page.queries.ts”: copy all content and paste in graphql/packl/page.ts
6. For all the new files created, you can delete any comments referencing “BACKPACK API QUERIES” or “STOREFRONT API QUERIES”, but keep comments that link to documentation, e.g. “// Docs: ..."
7. After all the files have been updated, ensure any imports are pointing to the new files they belong to. You can use local imports, e.g. `import {PRODUCT_ITEM_FRAGMENT} from ‘./product’` instead of `import {PRODUCT_ITEM_FRAGMENT} from '~/data/graphql/storefront/product’;` Delete any unnecessary imports
8. Search the codebase for instances of imports of all the queries/fragments from all the new files, and correct them to be direct imports. They’ll likely be imported from ‘~/data/queries’. Ensure to use the alias import so ‘~/data/…”
9. Delete the app/data/queries folder
10. Find where `COLLECTION_FILTERS_QUERY` and `PRODUCTS_SEARCH_FILTERS_QUERY` are being imported and used, and instead place in the actual query string where the variable is being used. Ensure the product search filters `query` is named `ProductsSearchFilters` and the collection filters `query` is named `CollectionFilters`.  Then remove the unnecessary imports and then delete the exported query itself from the respective graphql file
11. Remove `METAFIELD_FRAGMENT` and `PRODUCT_METAFIELDS_QUERY` from the new `product.ts` file, if they exist

Misc Recommended Updates

Prompt:

1. In `.eslintrc.cjs`:
   1. Add `'plugin:prettier/recommended’` to the `extends` array
   2. Add `plugins: ['react-refresh’]` to root of file
   3. Add the following rule into the `rules` array:
    /* Code starts below. Do not include this line */
   'react-refresh/only-export-components': [
     'error',
     {
       allowExportNames: [
         'meta',
         'links',
         'headers',
         'loader',
         'action',
         'shouldRevalidate',
       ],
     },
   ],
   /* Code ends above. Do not include this line */
2. In `package.json`:
   1. Add to root of file:
      /* Code starts below. Do not include this line */
      "optionalDependencies": {
        "@rollup/rollup-linux-x64-gnu": "4.40.0"
      }
      /* Code ends above. Do not include this line */

Prettier/Eslint

After all tasks have been completed, run npm run format in the terminal to ensure all the files are formatted correctly

Was this page helpful?