chore: update dependencies (#96)

Author: kasperkristensen

.gitignore

@@ -38,3 +38,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 node_modules
+
+.yarn
+.swc

next.config.js

@@ -1,12 +1,21 @@
 const { withStoreConfig } = require("./store-config")
 const store = require("./store.config.json")
+const path = require("path")
 
 module.exports = withStoreConfig({
   features: store.features,
   reactStrictMode: true,
   images: {
     domains: ["medusa-public-images.s3.eu-west-1.amazonaws.com", "localhost"],
   },
+  webpack: (config, options) => {
+    if (options.isServer) {
+      config.externals = ["@tanstack/react-query", ...config.externals]
+    }
+    const reactQuery = path.resolve(require.resolve("@tanstack/react-query"))
+    config.resolve.alias["@tanstack/react-query"] = reactQuery
+    return config
+  },
 })
 
 console.log("next.config.js", JSON.stringify(module.exports, null, 2))

package.json

@@ -22,28 +22,28 @@
   "dependencies": {
     "@headlessui/react": "^1.6.1",
     "@hookform/error-message": "^2.0.0",
-    "@medusajs/medusa": "^1.6.3",
-    "@medusajs/medusa-js": "^1.3.3",
+    "@medusajs/medusa-js": "^1.3.7",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",
     "@paypal/react-paypal-js": "^7.8.1",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
+    "@tanstack/react-query": "^4.22.4",
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
-    "medusa-react": "^3.0.1",
+    "medusa-react": "^4.0.2",
     "next": "^12.2.0",
     "react": "17.0.2",
     "react-country-flag": "^3.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "^7.30.0",
     "react-instantsearch-hooks-web": "^6.29.0",
     "react-intersection-observer": "^9.3.4",
-    "react-query": "^3.34.16",
     "sharp": "^0.30.7"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@medusajs/medusa": "^1.7.5",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
     "@types/react-instantsearch-dom": "^6.12.3",

src/lib/config.ts

@@ -1,5 +1,5 @@
 import Medusa from "@medusajs/medusa-js"
-import { QueryClient } from "react-query"
+import { QueryClient } from "@tanstack/react-query"
 
 // Defaults to standard port for Medusa server
 let MEDUSA_BACKEND_URL = "http://localhost:9000"

src/lib/context/account-context.tsx

@@ -1,9 +1,9 @@
 import { medusaClient } from "@lib/config"
 import { Customer } from "@medusajs/medusa"
+import { useMutation } from "@tanstack/react-query"
 import { useMeCustomer } from "medusa-react"
 import { useRouter } from "next/router"
 import React, { createContext, useCallback, useContext, useState } from "react"
-import { useMutation } from "react-query"
 
 export enum LOGIN_VIEW {
   SIGN_IN = "sign-in",
@@ -46,7 +46,10 @@ export const AccountProvider = ({ children }: AccountProviderProps) => {
     }
   }, [customer, retrievingCustomer, router])
 
-  const useDeleteSession = useMutation("delete-session", handleDeleteSession)
+  const useDeleteSession = useMutation({
+    mutationFn: handleDeleteSession,
+    mutationKey: ["delete-session"],
+  })
 
   const handleLogout = () => {
     useDeleteSession.mutate(undefined, {

src/lib/hooks/use-layout-data.tsx

@@ -1,8 +1,8 @@
 import { medusaClient } from "@lib/config"
 import { getPercentageDiff } from "@lib/util/get-precentage-diff"
 import { Product, ProductCollection, Region } from "@medusajs/medusa"
+import { useQuery } from "@tanstack/react-query"
 import { formatAmount, useCart } from "medusa-react"
-import { useQuery } from "react-query"
 import { ProductPreviewType } from "types/global"
 import { CalculatedVariant } from "types/medusa"
 
@@ -36,7 +36,9 @@ const fetchCollectionData = async (): Promise<LayoutCollection[]> => {
 }
 
 export const useNavigationCollections = () => {
-  const queryResults = useQuery("navigation_collections", fetchCollectionData, {
+  const queryResults = useQuery({
+    queryFn: fetchCollectionData,
+    queryKey: ["navigation_collections"],
     staleTime: Infinity,
     refetchOnWindowFocus: false,
   })

src/modules/checkout/components/discount-code/index.tsx

@@ -6,7 +6,7 @@ import Trash from "@modules/common/icons/trash"
 import { formatAmount, useCart, useUpdateCart } from "medusa-react"
 import React, { useMemo } from "react"
 import { useForm } from "react-hook-form"
-import { useMutation } from "react-query"
+import { useMutation } from "@tanstack/react-query"
 
 type DiscountFormValues = {
   discount_code: string

src/modules/collections/templates/index.tsx

@@ -7,7 +7,7 @@ import { fetchCollectionProducts } from "@pages/collections/[id]"
 import { useCart } from "medusa-react"
 import React, { useEffect } from "react"
 import { useInView } from "react-intersection-observer"
-import { useInfiniteQuery } from "react-query"
+import { useInfiniteQuery } from "@tanstack/react-query"
 
 type CollectionTemplateProps = {
   collection: {

src/modules/products/components/infinite-products/index.tsx

@@ -8,7 +8,7 @@ import SkeletonProductPreview from "@modules/skeletons/components/skeleton-produ
 import { useCart } from "medusa-react"
 import { useEffect, useMemo } from "react"
 import { useInView } from "react-intersection-observer"
-import { useInfiniteQuery } from "react-query"
+import { useInfiniteQuery } from "@tanstack/react-query"
 
 type InfiniteProductsType = {
   params: StoreGetProductsParams

src/modules/products/components/related-products/index.tsx

@@ -7,7 +7,7 @@ import Button from "@modules/common/components/button"
 import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
 import { useCart } from "medusa-react"
 import { useMemo } from "react"
-import { useInfiniteQuery } from "react-query"
+import { useInfiniteQuery } from "@tanstack/react-query"
 import ProductPreview from "../product-preview"
 
 type RelatedProductsProps = {