65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
|
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||
|
|
import { SALEOR_API_URL_HEADER, SALEOR_AUTHORIZATION_BEARER_HEADER } from "@saleor/app-sdk/const";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
type Options = Record<string, string>;
|
||
|
|
|
||
|
|
interface UseFetchProps {
|
||
|
|
url: string;
|
||
|
|
options?: Options;
|
||
|
|
skip?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
// This hook is meant to be used mainly for internal API calls
|
||
|
|
const useAppApi = ({ url, options, skip }: UseFetchProps) => {
|
||
|
|
const { appBridgeState } = useAppBridge();
|
||
|
|
|
||
|
|
const [data, setData] = useState<any>();
|
||
|
|
const [error, setError] = useState<unknown>();
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
const fetchOptions: RequestInit = {
|
||
|
|
...options,
|
||
|
|
headers: [
|
||
|
|
[SALEOR_API_URL_HEADER, appBridgeState?.saleorApiUrl!],
|
||
|
|
[SALEOR_AUTHORIZATION_BEARER_HEADER, appBridgeState?.token!],
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async () => {
|
||
|
|
setLoading(true);
|
||
|
|
setError(undefined);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await fetch(url, fetchOptions);
|
||
|
|
|
||
|
|
if (!res.ok) {
|
||
|
|
throw new Error(`Error status: ${res.status}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const json = await res.json();
|
||
|
|
setData(json);
|
||
|
|
} catch (e) {
|
||
|
|
setError(e as unknown);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (appBridgeState?.ready && !skip) {
|
||
|
|
fetchData();
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
setLoading(false);
|
||
|
|
setError(undefined);
|
||
|
|
setData(undefined);
|
||
|
|
};
|
||
|
|
}, [url, options, skip]);
|
||
|
|
|
||
|
|
return { data, error, loading };
|
||
|
|
};
|
||
|
|
|
||
|
|
export default useAppApi;
|