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

jerelmiller commented 2 months ago

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[bot] commented 2 months ago

🦋 Changeset detected

Latest commit: 7a72e3f37aaf24d72350af64a3756cd634186187

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[bot] commented 2 months ago

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[bot] commented 2 months ago

Deploy Preview for apollo-client-docs ready!

Name	Link
Latest commit	d78c2413f44b33ee3e37ce57f37d792fe7e283c3
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[bot] commented 2 months ago

Deploy Preview for apollo-client-docs ready!

Name	Link
Latest commit	7a72e3f37aaf24d72350af64a3756cd634186187
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.

apollographql / apollo-client