Update and upgrade ApolloClient to version 3.0.2

Author: w3bdesign

components/Cart/AddToCartButton.component.jsx

@@ -2,7 +2,7 @@ import { useState, useContext } from 'react';
 
 import { v4 as uuidv4 } from 'uuid';
 
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/client';
 
 import { AppContext } from 'utils/context/AppContext';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { v4 } from 'uuid';
 import { useContext, useState } from 'react';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/client';
 
 import { AppContext } from 'utils/context/AppContext';
 import {

components/Checkout/CheckoutForm.component.jsx

@@ -1,5 +1,5 @@
 import { useState, useContext, useEffect } from 'react';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/client';
 
 import Billing from './Billing.component';
 import OrderDetails from './OrderDetails.component';

components/Product/IndexProducts.component.jsx

@@ -32,12 +32,14 @@ const IndexProducts = ({ products }) => {
                     as={`/produkt/${slug}?productId=${productId}`}
                   >
                     <a>
-                      <img
-                        id="product-image"
-                        className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
-                        alt={name}
-                        src={image.sourceUrl}
-                      />
+                      {image && (
+                        <img
+                          id="product-image"
+                          className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
+                          alt={name}
+                          src={image.sourceUrl}
+                        />
+                      )}
                     </a>
                   </Link>
                   <div className="flex justify-center pt-3">

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "0.9.83",
+  "version": "0.9.9",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,30 +12,24 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
-    "@types/react": "^16.9.42",
-    "algoliasearch": "^4.3.0",
+    "@apollo/client": "^3.0.2",
+    "@types/react": "^16.9.43",
+    "algoliasearch": "^4.3.1",
     "apollo-boost": "^0.4.9",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
     "graphql": "^15.3.0",
-    "graphql-tag": "^2.10.4",
     "next": "^9.4.4",
     "nprogress": "^0.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^6.0.3",
-    "react-instantsearch-dom": "^6.6.0",
+    "react-hook-form": "^6.0.8",
+    "react-instantsearch-dom": "^6.7.0",
     "react-spring": "^8.0.27",
     "styled-components": "^5.1.1",
     "uuid": "^8.2.0"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "^1.10.7",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "^1.5.2"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import { ApolloProvider } from '@apollo/react-hooks';
+import { ApolloProvider } from '@apollo/client'
 import { AppProvider } from 'utils/context/AppContext';
 
 import Router from 'next/router';

pages/_app.js

@@ -1,18 +1,20 @@
 import fetch from 'node-fetch';
-import { ApolloClient } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { createHttpLink } from 'apollo-link-http';
-import { ApolloLink } from 'apollo-link';
+import {
+  ApolloClient,
+  InMemoryCache,
+  createHttpLink,
+  ApolloLink,
+  //IntrospectionFragmentMatcher,
+} from '@apollo/client';
 
-import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import introspectionQueryResultData from './fragmentTypes';
 
 import { WOO_CONFIG } from 'utils/config/nextConfig';
 
 // Fragment matcher.
-const fragmentMatcher = new IntrospectionFragmentMatcher({
+/*const fragmentMatcher = new IntrospectionFragmentMatcher({
   introspectionQueryResultData,
-});
+});*/
 
 /**
  * Middleware operation
@@ -88,7 +90,8 @@ const client = new ApolloClient({
       })
     )
   ),
-  cache: new InMemoryCache({ fragmentMatcher }),
+  //cache: new InMemoryCache({ possibleTypes: introspectionQueryResultData }),
+  cache: new InMemoryCache(),
 });
 
 export default client;

utils/apollo/ApolloClient.js

@@ -2,21 +2,22 @@
 
 // Live details
 
+/*
 export const WOO_CONFIG = {
   GRAPHQL_URL: 'https://woocommerce.dfweb.no/graphql',
   ALGOLIA_APP_ID: '7L9M5Y0B1K',
   ALGOLIA_PUBLIC_API_KEY: '925cc92373120f1bf477bb8ce0e71649',
   ALGOLIA_INDEX_NAME: 'dfweb',
 };
+*/
 
 // Development details
 
-/*
 export const WOO_CONFIG = {
   GRAPHQL_URL: 'http://localhost/wp/graphql',
   ALGOLIA_APP_ID: '7L9M5Y0B1K',
   ALGOLIA_PUBLIC_API_KEY: '925cc92373120f1bf477bb8ce0e71649',
 };
-*/
+
 
 export default WOO_CONFIG;

utils/config/nextConfig.js

@@ -96,12 +96,12 @@ export const getUpdatedProducts = (
     product.productId
   );
 
-  // If product exits ( index of that product found in the array ), update the product quantity and totalPrice
+  // If product exists ( index of that product was found in the array ), update the product quantity and totalPrice
   if (-1 < productExitsIndex) {
     let updatedProducts = existingProductsInCart;
     let updatedProduct = updatedProducts[productExitsIndex];
 
-    // If have new qty of the product available, set that else add the qtyToBeAdded
+    // If have new quantity of the product available, set that, else add the qtyToBeAdded
     updatedProduct.qty = newQty
       ? parseInt(newQty)
       : parseInt(updatedProduct.qty + qtyToBeAdded);