How to consume API in Astro.
Thread ๐งต๐๐ป
Thread ๐งต๐๐ป
Astro is a relatively new static site generator that allows you to use your preferred JS framework.
Currently, the following frameworks are supported:
- React
- Svelte
- Vue
- Solid
- Preact
- Alpine
- Lit
- Vanilla JS
Currently, the following frameworks are supported:
- React
- Svelte
- Vue
- Solid
- Preact
- Alpine
- Lit
- Vanilla JS
Astro components use a special structure that contains two parts.
The component script and component template.
The component script and component template.
The component script part is executed before the actual component is rendered.
We will use this part of the component to fetch data which will then be used in the template.
We will use this part of the component to fetch data which will then be used in the template.
The example below shows what the actual request looks like.
We're using the JSON placeholder API as an example here and fetching posts.
Astro allows you to use the global fetch function.
Astro also allows you to use the top-level await. (no need for async wrapper)
We're using the JSON placeholder API as an example here and fetching posts.
Astro allows you to use the global fetch function.
Astro also allows you to use the top-level await. (no need for async wrapper)
We can assign returned data into the components' variable and access the variable right in the component template part.
In our case, the variable is called "post".
In our case, the variable is called "post".
Astro allows you to access also GraphQL APIs
The example below is taken directly from the Astro documentation.
As you can see we're passing the actual GraphQL query in the body parameter.
The example below is taken directly from the Astro documentation.
As you can see we're passing the actual GraphQL query in the body parameter.
Hope you enjoyed this short tutorial.
If you found this thread useful, follow @Rapid_API ๐๐
If you found this thread useful, follow @Rapid_API ๐๐
Loading suggestions...