Add ability to configure a name for the client for use with devtools

[jerelmiller]

This PR adds the ability to specify a name for a client instance for use with devtools. This will be useful for the multiple clients feature to be able to more easily identify each client. Without this functionality, a randomly generated ID will be shown instead. Adding a name makes this more human-friendly.

As such, I've modified the way devtools is configured with the client by deprecating connectToDevtools and added a new devtools option:

new ApolloClient({
  devtools: {
    enabled: true,
    name: 'Apollo Client 1',
  }
})

This is fully backwards compatible with connectToDevtools and will set enabled to true if the connectToDevtools option is set. Structuring the config this way enables us to add additional functionality and configuration for the devtools in future versions without having to get creative with naming.

---

This PR is missing updates to docs which will follow if we decide we like this change.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7a72e3f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@apollo/client	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	39.17 KB (+0.11% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	47.9 KB (+0.09% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	45.44 KB (+0.09% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	34.31 KB (+0.1% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	32.17 KB (+0.12% 🔺)
import { ApolloProvider } from "dist/react/index.js"	1.26 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.24 KB (0%)
import { useQuery } from "dist/react/index.js"	5.23 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.31 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	5.71 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.79 KB (0%)
import { useMutation } from "dist/react/index.js"	3.62 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.84 KB (0%)
import { useSubscription } from "dist/react/index.js"	4.4 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	3.45 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	5.49 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.15 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.99 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.64 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	5.07 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.72 KB (0%)
import { useReadQuery } from "dist/react/index.js"	3.39 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	3.33 KB (0%)
import { useFragment } from "dist/react/index.js"	2.32 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.27 KB (0%)

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	d78c241
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/668c77b5fa6dd50008c39294
😎 Deploy Preview	https://deploy-preview-11936--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	7a72e3f
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/668d44475dd3410008254e2e
😎 Deploy Preview	https://deploy-preview-11936--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[phryneas]

Love the new option! :)