Integrate firebase/perf with RTK Query

[Ebeldev]

Hi,

I would like to integrate firebase/perf in Rtk Query.

Is there a way to hook into all fetch request at one place. So I can mesure each fetch?

Firebase/perf integration in a function ::

 // Define the network metric
  const metric = await perf().newHttpMetric(url, 'GET');

  // Define meta details
  metric.putAttribute('user', 'abcd');

  // Start the metric
  await metric.start();

  // Perform a HTTP request and provide response information
  const response = await fetch(url);


  metric.setHttpResponseCode(response.status);
  metric.setResponseContentType(response.headers.get('Content-Type'));
  metric.setResponsePayloadSize(response.headers.get('Content-Length'));

  // Stop the metric
  await metric.stop();

I would like to replace the fetch in this snippet with the RTK Query main fetch function.

Anyone ever done this integration ?

Thanks for your help.

[ElSeniorMikael]

Any follow up on this ?

[multiplehats]

Can't you just create your own fetch wrapper around FIrebase, and use queryFn instead of query? That should do the trick.

export const cartApiService = createApi({
	reducerPath: "cartApi",
	// This won't get used, but is required
	baseQuery: fetchBaseQuery({ baseUrl: "/" }),
	tagTypes: ["CartData", "CartItem"],
	endpoints: (builder) => ({
		getCartData: builder.query<Cart, void>({
			queryFn: async () => {
                                 // My custom fetch wrapper
				const { data, error } = await api.get<CartResponse>(
					"/v1/cart"
				);

				if (error) {
					return { error };
				}

				return {
					data: formatCartResponse(data),
				};
			},
		}),
	}),
});