Calling non-Airplane APIs

While views make it easy to integrate Airplane tasks using Task backed components or React hooks, there may be times when you want to call a non-Airplane backend API.
It's easy to create a small Airplane task that calls an API. By wrapping the API call in an Airplane task, you can utilize Task backed components which provide automatic data fetching, loading and error state.

Rest task
The easiest way to call an API via Airplane task is by creating a REST task. Follow REST getting started to deploy a REST task that calls your API.

JavaScript task
Follow the Getting started guide to create a JavaScript task. Include any Parameters that your API call needs.
The body of your task should look something like:
javascript
Copied
1
const endpoint = "https://catfact.ninja/fact";
2


3
export default async function (params) {
4
  const response = await fetch(endpoint);
5
  if (!response.ok) {
6
    throw new Error(response.status);
7
  }
8


9
  const responseData = await response.json();
10
  // The catfacts API returns a response of type { fact: string }.
11
  return responseData.fact;
12
}

Call the API directly from your view
If you do not want to wrap your API call in an Airplane task, you can call the API directly from your view using the built in fetch API or another data fetching library.
Any secret API keys or other sensitive authentication pieces should not be included directly in a view.
tsx
Copied
1
const [catFact, setCatFact] = useState("");
2
useEffect(() => {
3
  async function fetchCatFact() {
4
    try {
5
      const response = await fetch("https://catfact.ninja/fact");
6
      if (!response.ok) {
7
        alert(`Errored with status ${response.status}`);
8
      }
9
       const data = await response.json();
10
      setCatFact(data.fact);
11
    } catch (error) {
12
      return alert(error);
13
    }
14
  }
15
  fetchCatFact();
16
}, []);
17
 if (!catFact) {
18
  return <Loader />;
19
}
20
 return (
21
  <Stack>
22
    <Title>Tell me a cat fact</Title>
23
    <Text size="lg">{catFact}</Text>
24
  </Stack>
25
);
PrivacyTermsSupport