Fetching Weather at build time

via https://graphql-weather-api.herokuapp.com

Toronto, CA -- clear sky

Paris, FR -- clear sky

Milan, IT -- clear sky

Here's the code for this page, still a work in progress!

The front matter calls a getWeather function, right now with a hard-coded city name. This function calls fetchAPI, which fetches data from a GraphQL server via plain JavaScript.

    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    
    async function fetchApi(city) {
        const response = await fetch("https://graphql-weather-api.herokuapp.com", {
            method:'POST',
            headers: {'Content-Type':'application/json',},
            body: JSON.stringify({
                query: `
                    query getWeather($name:String!) {
                        getCityByName(name: $name){
                            name
                            country
                            weather {
                                summary {
                                    description
                                }
                            }
                        }

                    }
                    `,
                variables: {
                    name: city,
                },
            }),
        })

        const json = await response.json();

        if(json.errors){
            console.log(json.errors);
            throw new Error('Failed to fetch API');
        }
        return json.data;
    }

    async function getWeather(city){
        const data = await fetchApi(city)
        console.log(data)
        return data
    }

    const weatherTO = await getWeather("Toronto");
    const weatherParis = await getWeather("Paris");
    ---
    <BaseLayout title = "GraphQL API fetch in Astro" >
        <main>
            <h2>Fetching Weather at build time</h2>
            <p> via https://graphql-weather-api.herokuapp.com</p>
            <h3>{weatherTO.getCityByName.name}, {weatherTO.getCityByName.country} -- {weatherTO.getCityByName.weather.summary.description}</h3>
            <h3>{weatherParis.getCityByName.name}, {weatherParis.getCityByName.country} -- {weatherParis.getCityByName.weather.summary.description}</h3>
            <hr />
        </main>
    </BaseLayout>