Make SDK realtime composable compatible with React Native

.changeset/lucky-rivers-taste.md

@@ -0,0 +1,5 @@
+---
+'@directus/sdk': major
+---
+
+Made the SDK realtime composable compatible with React Native, the WebSocket client will now be initialized with the URL as `string` instead of `URL`

sdk/src/realtime/composable.ts

@@ -58,17 +58,19 @@ export function realtime(config: WebSocketConfig = {}) {
  const debug = (level: keyof ConsoleInterface, ...data: any[]) =>
  config.debug && client.globals.logger[level]('[Directus SDK]', ...data);
 
- const withStrictAuth = async (url: URL, currentClient: AuthWSClient<Schema>) => {
+ const withStrictAuth = async (url: URL | string, currentClient: AuthWSClient<Schema>) => {
+ const newUrl = new client.globals.URL(url);
+
  if (config.authMode === 'strict' && hasAuth(currentClient)) {
  const token = await currentClient.getToken();
- if (token) url.searchParams.set('access_token', token);
+ if (token) newUrl.searchParams.set('access_token', token);
  }
 
- return url;
+ return newUrl.toString();
  };
 
  const getSocketUrl = async (currentClient: AuthWSClient<Schema>) => {
- if ('url' in config) return await withStrictAuth(new client.globals.URL(config.url), currentClient);
+ if ('url' in config) return await withStrictAuth(config.url, currentClient);
 
  // if the main URL is a websocket URL use it directly!
  if (['ws:', 'wss:'].includes(client.url.protocol)) {

sdk/src/types/globals.ts

@@ -3,8 +3,9 @@ export type FetchInterface = (input: string | any, init?: RequestInit | any) =>
 
 export type UrlInterface = typeof URL;
 
+/** While the standard says 'string | URL' for the 'url' parameter, some implementations (e.g. React Native) only accept 'string' */
 export type WebSocketConstructor = {
- new (url: URL, protocols?: string | string[]): WebSocketInterface;
+ new (url: string, protocols?: string | string[]): WebSocketInterface;
 };
 
 export type WebSocketInterface = {