feat: Add support for data services extending BaseDataService (MetaMask#27921)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Replace the default `QueryClient` with a custom `QueryClient` from
`createUIQueryClient`. This establishes the query client required for
using the `BaseDataService` pattern from the core repo, which handles
cache syncing. Existing UI-only queries should work as they did
previously.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

https://consensyssoftware.atlassian.net/browse/WPC-445

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes how the global React Query
`QueryClient` is constructed and introduces messenger-backed
call/subscribe plumbing that could affect caching and network behavior
across the app.
> 
> **Overview**
> Switches `ReactQueryService` to build its `queryClient` via
`@metamask/react-data-query`’s `createUIQueryClient`, passing an Engine
messenger adapter to support data services and cache syncing while
keeping the existing default query options.
> 
> Adds a `DATA_SERVICES` registry (currently empty) for wiring in
available data services, updates unit tests to validate the new client
defaults and cache clearing behavior, and adds the new
`@metamask/react-data-query` dependency (plus lockfile updates).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
088a264. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: FrederikBolding

app/constants/data-services.ts

@@ -0,0 +1,2 @@
+// A list of all names of data services available in the client.
+export const DATA_SERVICES: string[] = [];

app/core/ReactQueryService/ReactQueryService.test.ts

@@ -7,8 +7,8 @@ import {
 import { addEventListener as addNetInfoEventListener } from '@react-native-community/netinfo';
 import { ReactQueryService } from './ReactQueryService';
 
-jest.mock('@tanstack/react-query', () => ({
-  QueryClient: jest.fn().mockImplementation(() => ({ clear: jest.fn() })),
+jest.mock('@tanstack/query-core', () => ({
+  ...jest.requireActual('@tanstack/query-core'),
   focusManager: { setFocused: jest.fn() },
   onlineManager: { setEventListener: jest.fn() },
 }));
@@ -43,14 +43,15 @@ describe('ReactQueryService', () => {
 
   describe('constructor', () => {
     it('creates a QueryClient with expected default options', () => {
-      expect(QueryClient).toHaveBeenCalledWith({
-        defaultOptions: {
-          queries: {
-            staleTime: 1000 * 60 * 5,
-            retry: 2,
-            cacheTime: 1000 * 60 * 60 * 24,
-          },
+      // @ts-expect-error Accessing private property.
+      expect(service.queryClient.defaultOptions).toStrictEqual({
+        queries: {
+          staleTime: 1000 * 60 * 5,
+          retry: 2,
+          cacheTime: 1000 * 60 * 60 * 24,
+          queryFn: expect.any(Function),
         },
+        mutations: undefined,
       });
     });
 
@@ -169,9 +170,11 @@ describe('ReactQueryService', () => {
     });
 
     it('clears the query client cache', () => {
+      const spy = jest.spyOn(service.queryClient, 'clear');
+
       service.destroy();
 
-      expect(service.queryClient.clear).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalled();
     });
   });
 });

app/core/ReactQueryService/ReactQueryService.ts

@@ -8,6 +8,29 @@ import {
   addEventListener as addNetInfoEventListener,
   type NetInfoState,
 } from '@react-native-community/netinfo';
+import { createUIQueryClient } from '@metamask/react-data-query';
+import { Json } from '@metamask/utils';
+import { MessengerActions, MessengerEvents } from '@metamask/messenger';
+import Engine from '../Engine/Engine';
+import { RootMessenger } from '../Engine/types';
+import { DATA_SERVICES } from '../../constants/data-services';
+
+type ActionType = MessengerActions<RootMessenger>['type'];
+type EventType = MessengerEvents<RootMessenger>['type'];
+
+type JsonSubscriptionCallback = (data: Json) => void;
+
+const adapter = {
+  call: async (method: string, ...params: Json[]) =>
+    // @ts-expect-error Target requires 1 element(s) but source may have fewer.
+    Engine.controllerMessenger.call(method as ActionType, ...params) as Json,
+  subscribe: (event: string, callback: JsonSubscriptionCallback) => {
+    Engine.controllerMessenger.subscribe(event as EventType, callback);
+  },
+  unsubscribe: (event: string, callback: JsonSubscriptionCallback) => {
+    Engine.controllerMessenger.unsubscribe(event as EventType, callback);
+  },
+};
 
 export class ReactQueryService {
   queryClient: QueryClient;
@@ -16,7 +39,7 @@ export class ReactQueryService {
   #netInfoUnsubscribe?: () => void;
 
   constructor() {
-    this.queryClient = new QueryClient({
+    this.queryClient = createUIQueryClient(DATA_SERVICES, adapter, {
       defaultOptions: {
         queries: {
           // Mobile users often trigger re-renders or navigate back/forth frequently.

package.json

@@ -281,6 +281,7 @@
     "@metamask/profile-metrics-controller": "^3.1.0",
     "@metamask/profile-sync-controller": "^28.0.0",
     "@metamask/ramps-controller": "^12.0.1",
+    "@metamask/react-data-query": "^0.2.0",
     "@metamask/react-native-acm": "1.2.0",
     "@metamask/react-native-actionsheet": "2.4.2",
     "@metamask/react-native-button": "^3.0.0",

yarn.lock

@@ -7883,6 +7883,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/base-data-service@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "@metamask/base-data-service@npm:0.1.1"
+  dependencies:
+    "@metamask/controller-utils": "npm:^11.19.0"
+    "@metamask/messenger": "npm:^1.0.0"
+    "@metamask/utils": "npm:^11.9.0"
+    "@tanstack/query-core": "npm:^4.43.0"
+    fast-deep-equal: "npm:^3.1.3"
+  checksum: 10/b746cfaad6625d61e0d5e3202488d1f3139ef1e4b8f04c7b07a3e0fbe474c1307c73bacb1cf5d9288e946719137c52f1bc1fd40e9e44800f65b8729bbed7311d
+  languageName: node
+  linkType: hard
+
 "@metamask/bitcoin-wallet-snap@npm:^1.10.0":
   version: 1.10.0
   resolution: "@metamask/bitcoin-wallet-snap@npm:1.10.0"
@@ -8890,6 +8903,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/messenger@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@metamask/messenger@npm:1.0.0"
+  checksum: 10/ab1219a922d5acc86f2b1b557d79c75ca0c5f42572f50da8a2337bc5c8feb1ae95c0aaa2d2ee55b677acd4401fb2cc9c2dbacca7513edcddf20d88fb73fa7bea
+  languageName: node
+  linkType: hard
+
 "@metamask/metamask-eth-abis@npm:3.1.1, @metamask/metamask-eth-abis@npm:^3.1.1":
   version: 3.1.1
   resolution: "@metamask/metamask-eth-abis@npm:3.1.1"
@@ -9433,6 +9453,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/react-data-query@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "@metamask/react-data-query@npm:0.2.0"
+  dependencies:
+    "@metamask/base-data-service": "npm:^0.1.0"
+    "@metamask/utils": "npm:^11.9.0"
+    "@tanstack/query-core": "npm:^4.43.0"
+    "@tanstack/react-query": "npm:^4.43.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-native: "*"
+  checksum: 10/c54a9943bb68ad46ad9964864d4ee81604e61216ebed00026a1a4681a1e1091b6e413b9812d25e38d028493f3c75e91c8102b9d1c0232f409cd6f1dd4d22b211
+  languageName: node
+  linkType: hard
+
 "@metamask/react-native-acm@npm:1.2.0":
   version: 1.2.0
   resolution: "@metamask/react-native-acm@npm:1.2.0"
@@ -17427,7 +17463,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:4.43.0":
+"@tanstack/query-core@npm:4.43.0, @tanstack/query-core@npm:^4.43.0":
   version: 4.43.0
   resolution: "@tanstack/query-core@npm:4.43.0"
   checksum: 10/c2a5a151c7adaea8311e01a643255f31946ae3164a71567ba80048242821ae14043f13f5516b695baebe5ea7e4b2cf717fd60908a929d18a5c5125fee925ff67
@@ -35612,6 +35648,7 @@ __metadata:
     "@metamask/profile-sync-controller": "npm:^28.0.0"
     "@metamask/providers": "npm:^18.3.1"
     "@metamask/ramps-controller": "npm:^12.0.1"
+    "@metamask/react-data-query": "npm:^0.2.0"
     "@metamask/react-native-acm": "npm:1.2.0"
     "@metamask/react-native-actionsheet": "npm:2.4.2"
     "@metamask/react-native-button": "npm:^3.0.0"