feat(gatsby-source-graphql): upgrade apollo & graphql-tools deps (#34772)

Co-authored-by: gatsbybot <[email protected]>
Co-authored-by: LekoArts <[email protected]>

Author: 3 people

docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md

@@ -505,12 +505,14 @@ Now in your plugin's `gatsby-node.js` file, you can implement a new API, called
 Import the `createRemoteFileNode` helper from `gatsby-source-filesystem`, which will download a file from a remote location and create a `File` node for you.
 
 ```javascript:title=source-plugin/gatsby-node.js
-const { ApolloClient } = require("apollo-client")
-const { InMemoryCache } = require("apollo-cache-inmemory")
-const { split } = require("apollo-link")
-const { HttpLink } = require("apollo-link-http")
-const { WebSocketLink } = require("apollo-link-ws")
-const { getMainDefinition } = require("apollo-utilities")
+const {
+  ApolloClient,
+  InMemoryCache,
+  split,
+  HttpLink,
+} = require("@apollo/client")
+const { WebSocketLink } = require("@apollo/client/link/ws")
+const { getMainDefinition } = require("@apollo/client/utilities")
 const fetch = require("node-fetch")
 const gql = require("graphql-tag")
 const WebSocket = require("ws")

examples/creating-source-plugins/source-plugin/gatsby-node.js

@@ -1,11 +1,13 @@
 const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
 const WebSocket = require("ws")
-const { ApolloClient } = require("apollo-client")
-const { InMemoryCache } = require("apollo-cache-inmemory")
-const { split } = require("apollo-link")
-const { HttpLink } = require("apollo-link-http")
-const { WebSocketLink } = require("apollo-link-ws")
-const { getMainDefinition } = require("apollo-utilities")
+const {
+  ApolloClient,
+  InMemoryCache,
+  split,
+  HttpLink,
+} = require("@apollo/client")
+const { WebSocketLink } = require("@apollo/client/link/ws")
+const { getMainDefinition } = require("@apollo/client/utilities")
 const fetch = require("node-fetch")
 const gql = require("graphql-tag")
 
@@ -145,9 +147,7 @@ exports.sourceNodes = async function sourceNodes(
 
   // touch nodes to ensure they aren't garbage collected
   getNodesByType(POST_NODE_TYPE).forEach(node => touchNode(node))
-  getNodesByType(AUTHOR_NODE_TYPE).forEach(node =>
-    touchNode(node)
-  )
+  getNodesByType(AUTHOR_NODE_TYPE).forEach(node => touchNode(node))
 
   // listen for updates using subscriptions from the API
   if (pluginOptions.preview) {

examples/creating-source-plugins/source-plugin/package.json

@@ -13,12 +13,7 @@
   "author": "Kyle Gill <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.20",
-    "apollo-utilities": "^1.3.4",
+    "@apollo/client": "^3.5.8",
     "gatsby-source-filesystem": "next",
     "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",

packages/gatsby-source-graphql/README.md

@@ -154,26 +154,26 @@ module.exports = {
 
 ## Composing Apollo Links for production network setup
 
-Network requests can fail, return errors or take too long. Use [Apollo Link](https://www.apollographql.com/docs/link/) to
+Network requests can fail, return errors or take too long. Use [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/) to
 add retries, error handling, logging and more to your GraphQL requests.
 
 Use the plugin's `createLink` option to add a custom Apollo Link to your GraphQL requests.
 
 You can compose different types of links, depending on the functionality you're trying to achieve.
 The most common links are:
 
-- `apollo-link-retry` for retrying queries that fail or time out
-- `apollo-link-error` for error handling
-- `apollo-link-http` for sending queries in http requests (used by default)
+- `@apollo/client/link/retry` for retrying queries that fail or time out
+- `@apollo/client/link/error` for error handling
+- `@apollo/client/link/http` for sending queries in http requests (used by default)
 
 For more explanation of how Apollo Links work together, check out this Medium article: [Productionizing Apollo Links](https://medium.com/@joanvila/productionizing-apollo-links-4cdc11d278eb).
 
-Here's an example of using the HTTP link with retries (using [apollo-link-retry](https://www.npmjs.com/package/apollo-link-retry)):
+Here's an example of using the HTTP link with retries (using [@apollo/client/link/retry](https://www.apollographql.com/docs/react/api/link/apollo-link-retry/)):
 
 ```js
 // gatsby-config.js
-const { createHttpLink } = require(`apollo-link-http`)
-const { RetryLink } = require(`apollo-link-retry`)
+const { createHttpLink, from } = require(`@apollo/client`)
+const { RetryLink } = require(`@apollo/client/link/retry`)
 
 const retryLink = new RetryLink({
   delay: {
@@ -200,10 +200,7 @@ module.exports = {
         // `pluginOptions`: all plugin options
         //   (i.e. in this example object with keys `typeName`, `fieldName`, `url`, `createLink`)
         createLink: pluginOptions =>
-          ApolloLink.from([
-            retryLink,
-            createHttpLink({ uri: pluginOptions.url }),
-          ]),
+          from([retryLink, createHttpLink({ uri: pluginOptions.url })]),
       },
     },
   ],

packages/gatsby-source-graphql/package.json

@@ -7,12 +7,11 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
+    "@apollo/client": "^3.5.8",
     "@babel/runtime": "^7.15.4",
-    "@graphql-tools/links": "^7.1.0",
-    "@graphql-tools/utils": "^7.10.0",
-    "@graphql-tools/wrap": "^7.0.8",
-    "apollo-link": "1.2.14",
-    "apollo-link-http": "^1.5.17",
+    "@graphql-tools/links": "^8.2.1",
+    "@graphql-tools/utils": "^8.6.1",
+    "@graphql-tools/wrap": "^8.3.3",
     "dataloader": "^2.0.0",
     "gatsby-core-utils": "^3.11.0-next.0",
     "invariant": "^2.2.4",

packages/gatsby-source-graphql/src/__tests__/gatsby-node.js

@@ -5,12 +5,12 @@ jest.mock(`@graphql-tools/wrap`, () => {
     RenameTypes: jest.fn(),
   }
 })
-jest.mock(`apollo-link-http`, () => {
+jest.mock(`@apollo/client`, () => {
   return {
     createHttpLink: jest.fn(),
   }
 })
-const { createHttpLink } = require(`apollo-link-http`)
+const { createHttpLink } = require(`@apollo/client`)
 const { testPluginOptionsSchema } = require(`gatsby-plugin-utils`)
 jest.mock(`gatsby/graphql`, () => {
   const graphql = jest.requireActual(`gatsby/graphql`)

packages/gatsby-source-graphql/src/batching/__tests__/dataloader-link.js

@@ -1,5 +1,5 @@
 const { parse } = require(`gatsby/graphql`)
-const { execute } = require(`apollo-link`)
+const { execute } = require(`@apollo/client`)
 const { createDataloaderLink } = require(`../dataloader-link`)
 
 const sampleQuery = parse(`{ foo }`)

packages/gatsby-source-graphql/src/batching/dataloader-link.js

@@ -1,5 +1,5 @@
 const DataLoader = require(`dataloader`)
-const { ApolloLink, Observable } = require(`apollo-link`)
+const { ApolloLink, Observable } = require(`@apollo/client`)
 const { print } = require(`gatsby/graphql`)
 const { merge, resolveResult } = require(`./merge-queries`)
 

packages/gatsby-source-graphql/src/gatsby-node.js

@@ -6,7 +6,7 @@ const {
   RenameTypes,
 } = require(`@graphql-tools/wrap`)
 const { linkToExecutor } = require(`@graphql-tools/links`)
-const { createHttpLink } = require(`apollo-link-http`)
+const { createHttpLink } = require(`@apollo/client`)
 const { fetchWrapper } = require(`./fetch`)
 const { createDataloaderLink } = require(`./batching/dataloader-link`)