chore(examples): Update package versions in examples and keep up-to-d…

…ate (#3071)
urql-graphql · Mar 27, 2023 · 0b9347c · 0b9347c
1 parent 6d2b91e
commit 0b9347c
Show file tree

Hide file tree

Showing 54 changed files with 388 additions and 382 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,8 +17,13 @@ exchanges/*/LICENSE
 # TODO: Figure out how to remove these:
 tmp/
 dist/
+examples/yarn.lock
+examples/pnpm-lock.yaml
+examples/package-lock.json
 examples/*/public
 examples/*/yarn.lock
+examples/*/pnpm-lock.yaml
+examples/*/package-lock.json
 examples/*/ios/
 examples/*/android/
 examples/*/.watchmanconfig

diff --git a/examples/pnpm-workspace.yaml b/examples/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+packages:
+  - '*'
diff --git a/examples/with-apq/package.json b/examples/with-apq/package.json
@@ -6,14 +6,15 @@
     "start": "vite"
   },
   "dependencies": {
+    "@urql/core": "^3.2.2",
     "@urql/exchange-persisted-fetch": "^1.3.0",
-    "graphql": "^15.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "urql": "^2.0.2"
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "urql": "^3.0.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "vite": "^2.2.4"
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.2.0"
   }
 }
diff --git a/examples/with-apq/src/App.jsx b/examples/with-apq/src/App.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { createClient, Provider, fetchExchange } from 'urql';
-import { persistedFetchExchange } from '@urql/exchange-persisted-fetch';
+import { Client, Provider, fetchExchange } from 'urql';
+import { persistedExchange } from '@urql/exchange-persisted';
 
 import LocationsList from './LocationsList';
 
-const client = createClient({
+const client = new Client({
   url: 'https://trygql.formidable.dev/graphql/apq-weather',
   exchanges: [
-    persistedFetchExchange({
+    persistedExchange({
       preferGetForPersistedQueries: true,
     }),
     fetchExchange,

diff --git a/examples/with-apq/src/index.jsx b/examples/with-apq/src/index.jsx
@@ -1,11 +1,6 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
-render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/with-apq/vite.config.js b/examples/with-apq/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
-import reactRefresh from '@vitejs/plugin-react-refresh';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh()],
+  plugins: [react()],
 });
diff --git a/examples/with-defer-stream-directives/package.json b/examples/with-defer-stream-directives/package.json
@@ -8,21 +8,28 @@
     "client": "vite",
     "start": "run-p client server:yoga"
   },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "graphql": "17"
+      }
+    }
+  },
   "dependencies": {
-    "@apollo/server": "^4.4.1",
     "@graphql-yoga/plugin-defer-stream": "^1.7.1",
-    "@urql/core": "^3.1.1",
-    "@urql/exchange-graphcache": "^5.0.9",
+    "@urql/core": "^3.2.2",
+    "@urql/exchange-graphcache": "^5.2.0",
     "graphql": "17.0.0-alpha.2",
-    "graphql-yoga": "^3.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "urql": "^3.0.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "urql": "^3.0.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "@apollo/server": "^4.4.1",
+    "@vitejs/plugin-react": "^3.1.0",
     "graphql-helix": "^1.13.0",
+    "graphql-yoga": "^3.7.1",
     "npm-run-all": "^4.1.5",
-    "vite": "^2.9.15"
+    "vite": "^4.2.0"
   }
 }
diff --git a/examples/with-defer-stream-directives/src/App.jsx b/examples/with-defer-stream-directives/src/App.jsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  createClient,
-  Provider,
-  dedupExchange,
-  debugExchange,
-  fetchExchange,
-} from 'urql';
+import { Client, Provider, fetchExchange } from 'urql';
 
 import { cacheExchange } from '@urql/exchange-graphcache';
 
@@ -18,9 +12,9 @@ const cache = cacheExchange({
   },
 });
 
-const client = createClient({
+const client = new Client({
   url: 'http://localhost:3004/graphql',
-  exchanges: [dedupExchange, cache, debugExchange, fetchExchange],
+  exchanges: [cache, fetchExchange],
 });
 
 function App() {

diff --git a/examples/with-defer-stream-directives/src/index.jsx b/examples/with-defer-stream-directives/src/index.jsx
@@ -1,11 +1,6 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
-render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/with-defer-stream-directives/vite.config.js b/examples/with-defer-stream-directives/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
-import reactRefresh from '@vitejs/plugin-react-refresh';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh()],
+  plugins: [react()],
 });
diff --git a/examples/with-graphcache-pagination/package.json b/examples/with-graphcache-pagination/package.json
@@ -6,14 +6,15 @@
     "start": "vite"
   },
   "dependencies": {
-    "@urql/exchange-graphcache": "^4.0.0",
-    "graphql": "^15.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "urql": "^2.0.2"
+    "@urql/core": "^3.2.2",
+    "@urql/exchange-graphcache": "^5.2.0",
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "urql": "^3.0.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "vite": "^2.2.4"
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.2.0"
   }
 }
diff --git a/examples/with-graphcache-pagination/src/App.jsx b/examples/with-graphcache-pagination/src/App.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { createClient, Provider, dedupExchange, fetchExchange } from 'urql';
+import { Client, Provider, fetchExchange } from 'urql';
 import { cacheExchange } from '@urql/exchange-graphcache';
 import { relayPagination } from '@urql/exchange-graphcache/extras';
 
 import PaginatedNpmSearch from './PaginatedNpmSearch';
 
-const client = createClient({
+const client = new Client({
   url: 'https://trygql.formidable.dev/graphql/relay-npm',
   exchanges: [
-    dedupExchange,
     cacheExchange({
       resolvers: {
         Query: {

diff --git a/examples/with-graphcache-pagination/src/index.jsx b/examples/with-graphcache-pagination/src/index.jsx
@@ -1,11 +1,6 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
-render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/with-graphcache-pagination/vite.config.js b/examples/with-graphcache-pagination/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
-import reactRefresh from '@vitejs/plugin-react-refresh';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh()],
+  plugins: [react()],
 });
diff --git a/examples/with-graphcache-updates/package.json b/examples/with-graphcache-updates/package.json
@@ -6,15 +6,16 @@
     "start": "vite"
   },
   "dependencies": {
-    "@urql/exchange-auth": "^0.1.2",
-    "@urql/exchange-graphcache": "^4.0.0",
-    "graphql": "^15.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "urql": "^2.0.2"
+    "@urql/core": "^3.2.2",
+    "@urql/exchange-auth": "^2.0.0",
+    "@urql/exchange-graphcache": "^5.2.0",
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "urql": "^3.0.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "vite": "^2.2.4"
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.2.0"
   }
 }
diff --git a/examples/with-graphcache-updates/src/client.js b/examples/with-graphcache-updates/src/client.js
@@ -1,5 +1,4 @@
-import { createClient, dedupExchange, fetchExchange, gql } from 'urql';
-import { makeOperation } from '@urql/core';
+import { Client, fetchExchange, gql } from 'urql';
 import { authExchange } from '@urql/exchange-auth';
 import { cacheExchange } from '@urql/exchange-graphcache';
 
@@ -40,78 +39,56 @@ const cache = cacheExchange({
   },
 });
 
-const client = createClient({
-  url: 'https://trygql.formidable.dev/graphql/web-collections',
-  exchanges: [
-    dedupExchange,
-    cache,
-    authExchange({
-      getAuth: async ({ authState }) => {
-        if (!authState) {
-          const token = localStorage.getItem('authToken');
-
-          if (token) {
-            return { token };
-          }
-
-          return null;
-        }
+const auth = authExchange(async utilities => {
+  let token = localStorage.getItem('authToken');
 
+  return {
+    addAuthToOperation(operation) {
+      if (!token) return operation;
+      return token
+        ? utilities.appendHeaders(operation, {
+            Authorization: `Bearer ${token}`,
+          })
+        : operation;
+    },
+    didAuthError(error) {
+      return error.graphQLErrors.some(
+        e => e.extensions?.code === 'UNAUTHORIZED'
+      );
+    },
+    willAuthError(operation) {
+      if (!token) {
+        // Detect our login mutation and let this operation through:
+        return (
+          operation.kind !== 'mutation' ||
+          // Here we find any mutation definition with the "signin" field
+          !operation.query.definitions.some(definition => {
+            return (
+              definition.kind === 'OperationDefinition' &&
+              definition.selectionSet.selections.some(node => {
+                // The field name is just an example, since register may also be an exception
+                return node.kind === 'Field' && node.name.value === 'signin';
+              })
+            );
+          })
+        );
+      }
+      return false;
+    },
+    async refreshAuth() {
+      token = localStorage.getItem('authToken');
+      if (!token) {
         // This is where auth has gone wrong and we need to clean up and redirect to a login page
         localStorage.clear();
         window.location.reload();
+      }
+    },
+  };
+});
 
-        return null;
-      },
-      addAuthToOperation: ({ authState, operation }) => {
-        if (!authState || !authState.token) {
-          return operation;
-        }
-
-        const fetchOptions =
-          typeof operation.context.fetchOptions === 'function'
-            ? operation.context.fetchOptions()
-            : operation.context.fetchOptions || {};
-
-        return makeOperation(operation.kind, operation, {
-          ...operation.context,
-          fetchOptions: {
-            ...fetchOptions,
-            headers: {
-              ...fetchOptions.headers,
-              Authorization: `Bearer ${authState.token}`,
-            },
-          },
-        });
-      },
-      didAuthError: ({ error }) => {
-        return error.graphQLErrors.some(
-          e => e.extensions?.code === 'UNAUTHORIZED'
-        );
-      },
-      willAuthError: ({ operation, authState }) => {
-        if (!authState) {
-          // Detect our login mutation and let this operation through:
-          return (
-            operation.kind !== 'mutation' ||
-            // Here we find any mutation definition with the "signin" field
-            !operation.query.definitions.some(definition => {
-              return (
-                definition.kind === 'OperationDefinition' &&
-                definition.selectionSet.selections.some(node => {
-                  // The field name is just an example, since register may also be an exception
-                  return node.kind === 'Field' && node.name.value === 'signin';
-                })
-              );
-            })
-          );
-        }
-
-        return false;
-      },
-    }),
-    fetchExchange,
-  ],
+const client = new Client({
+  url: 'https://trygql.formidable.dev/graphql/web-collections',
+  exchanges: [cache, auth, fetchExchange],
 });
 
 export default client;