Merge branch 'main' into jerel/update-query-types

.semgrepignore

@@ -11,3 +11,4 @@ dist/
 # custom paths
 __tests__/
 ./docs/source/data/subscriptions.mdx
+./docs/source/development-testing/developer-tooling.mdx

ROADMAP.md

@@ -1,6 +1,6 @@
 # 🔮 Apollo Client Ecosystem Roadmap
 
-**Last updated: 2024-11-04**
+**Last updated: 2024-12-11**
 
 For up to date release notes, refer to the project's [Changelog](https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md).
 
@@ -17,42 +17,41 @@ For up to date release notes, refer to the project's [Changelog](https://github.
 
 ### Apollo Client
 
-#### [3.12.0](https://github.com/apollographql/apollo-client/milestone/42) - November 18, 2024
-_Release candidate - November 11, 2024_
+#### [3.13.0](https://github.com/apollographql/apollo-client/milestone/42) - January 13, 2024
+_Release candidate - January 7th_
 
-- Data masking
+- `useSuspenseFragment`
 
 #### Upcoming features
 
-- Leaner client (under alternate entry point)
-- Better types for `useQuery`/`useMutation`/`useSubscription`
-- Introduce `useSuspenseFragment` that will suspend when the data is not yet loaded (experimental)
+- Deprecations and preparations for 4.0
 
 #### 4.0
 
-- `Release 4.0` will be our next major release of the Client and is still in early planning.  See Github [4.0 Milestone](https://github.com/apollographql/apollo-client/milestone/31) for more details.
+- `Release 4.0` will be our next major release of the Client and is still in planning. See Github [4.0 Milestone](https://github.com/apollographql/apollo-client/milestone/31) for more details.
 
 ### GraphQL Testing Library
 
 - New documentation
 - Subscription support (waiting for MSW WebSocket support to land)
 
+_These changes will take longer than anticipated due to prioritization on Apollo Client 4.0_
+
 ### VSCode Extension
 
-- Bug fixes and long-requested features
-- Apollo Client Devtools integration
+_No outstanding work_
 
 ### GraphQL Tag
 
-- Started 3.0 milestone planning
+- `Release 3.0` will be our next major release of `graphql-tag` and is still in planning. See Github [3.0 Milestone](https://github.com/apollographql/graphql-tag/milestone/3) for more details.
 
 ### Apollo Client DevTools
 
-- Ongoing work with fixing error messages shown in devtools
-- Add a memory panel to monitor Apollo Client devtools internal caches
-- Connectors debugger
+_These changes will take longer than anticipated due to prioritization on Apollo Client 4.0_
 
-### Apollo Client NextJS
+### Apollo Client React Framework Integrations
 
 - New/more robust documentation
 - Support for `@defer` in RSC
+- Support for Apollo Client Streaming in TanStack Router
+- Support for Apollo Client Streaming in React Router 7

docs/source/development-testing/developer-tooling.md → docs/source/development-testing/developer-tooling.mdx

@@ -40,3 +40,38 @@ You can install the extension via the webstores for [Chrome](https://chrome.goog
 While your app is in dev mode, the Apollo Client Devtools will appear as an "Apollo" tab in your web browser inspector. To enable the devtools in your app in production, pass `connectToDevTools: true` to the `ApolloClient` constructor in your app. Pass `connectToDevTools: false` if want to manually disable this functionality.
 
 Find more information about contributing and debugging on the [Apollo Client Devtools GitHub page](https://github.com/apollographql/apollo-client-devtools).
+
+## Apollo Client Devtools in VS Code
+
+The Apollo VSCode extension ships with an instance of the Apollo Client Devtools.
+You can use it to remotely debug your client, which makes it possible to also debug React Native and node applications.
+
+The following sections walk through how to install and integrate with the extension.
+
+<Note>
+This feature is currently released as "experimental" - please try it out and give us feedback in our [GitHub issues](https://github.com/apollographql/vscode-graphql/issues)!
+</Note>
+
+* Install the Apollo VS Code extension: [start installation](vscode:extension/apollographql.vscode-apollo) | [marketplace page](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo)
+* Set the "Apollographql > Dev Tools: Show Panel" setting to "detect" or "always" in the VS code settings dialog.
+<img class="screenshot" alt="A screenshot of the VS Code settings dialog focusing on the 'Show Panel' option" src="../assets/devtools/vscode-setting.png"/>
+* In your code base, install the `@apollo/client-devtools-vscode` package:
+```sh
+npm install @apollo/client-devtools-vscode
+```
+* After initializing your `ApolloClient` instance, call `registerClient` with your client instance.
+```js
+import { registerClient } from "@apollo/client-devtools-vscode";
+
+const client = new ApolloClient({ /* ... */ });
+
+// we recommend wrapping this statement in a check for e.g. process.env.NODE_ENV === "development"
+const devtoolsRegistration = registerClient(
+  client,
+  // the default port of the VSCode DevTools is 7095
+  "ws://localhost:7095",
+);
+```
+* Open the "Apollo Client DevTools" panel in VS Code.
+* Start your application. It should automatically connect to the DevTools.
+<img class="screenshot" alt="Apollo Client Devtools in a VS Code panel" src="../assets/devtools/vscode-panel.png"/>