[React Native iOS] Kiota is not working with React Native iOS

[AlexPalaz]

Kiota TypeScript integration is not working with React Native. I'm not getting any kind of error on logs. After debugging for a while, seems like that createClient from kiota has not being initialized. I tried to create a custom apiClientProxifier removing all the throw new Error and it works until send method inside the FetchRequestAdapter. So I'm supposing there's an issue inside the apiClientProxifier and specially on FetchRequestAdapter.

I tried on React Native Web and Kiota works fine, but on iOS is not working.

Tested on:

OS: iOS 17.5.1
React Native: 0.74.1
Expo SDK 50

[koros]

Hi @AlexPalaz,
Thank you for using Kiota and raising this issue. Could you please let me know if you are testing on an actual device or an emulator? This information will help me replicate the issue on my end

[AlexPalaz]

Hi @koros, I'm testing on real device but I've also tried with emulator but didn't work unfortunately

[koros]

@AlexPalaz Alright thanks for the info I'll set up a similar environment.

[BrianUribe6]

I'm not sure if this is related to the same issue, but when working on React Native (Android) I was unable to send any http requests. The error I was getting were not helpful at all. I got things like TypeError: Network Request Failed. After further investigation I figured that this might be related to React Native's fetch API.

When you don't specify a custom fetch callback. Kiota defaults to window.fetch (or this is what I assume it is getting transpiled to.)

kiota-typescript/packages/http/fetch/src/middlewares/middlewareFactory.ts

Line 27 in 8e980da

public static getDefaultMiddlewares(customFetch: (request: string, init: RequestInit) => Promise<Response> = (...args) => fetch(...args) as any): Middleware[] {

To fix this all you need to do is to create an instance of HttpClient and pass it your own fetch callback, and then use it to create your client.

function createRequestAdapter(provider: AuthenticationProvider) {
	// By Default it will use window.fetch if a fetch function is not specified.
	// We need to explicitly instantiate HttpClient and specify React Native's fetch.
	const httpClient = new HttpClient(fetch);
	const adapter = new FetchRequestAdapter(
		provider,
		undefined,
		undefined,
		httpClient
	);
	return adapter;
}

function createAPIClient() {
	const provider = new AnonymousAuthenticationProvider();
	const adapter = createRequestAdapter(provider);
	return createMyAPIClient(adapter);
}