Astro

npx create-wundergraph-app --example astro

// ...
const countries = introspect.graphql({
  apiNamespace: 'countries',
  url: 'https://countries.trevorblades.com/',
});

// configureWunderGraph emits the configuration
configureWunderGraphApplication({
  apis: [countries],
  // ...
});

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { client } from '../lib/wundergraph';

const { data } = await client.query({
	operationName: 'Continents',
})
---

<Layout title="Welcome to Astro.">
	<main>
		<h1>Welcome to <span class="text-gradient">Astro</span> + <span class="text-gradient">WunderGraph</span></h1>
		<p class="instructions">
			To get started, open the directory <code>src/pages</code> in your project.<br />
			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro + WunderGraph" message above.<br /><br />
			<a href="https://docs.wundergraph.com">WunderGraph Docs</a> - <a href="https://docs.astro.build/">Astro Docs</a>
		</p>
		<ul role="list" class="link-card-grid">
			{data && data.countries_continents.map((continent) => (
				<Card
					href={`/continents/${continent.code}`}
					title={continent.name}
					body={continent.name}
				/>
			))}
		</ul>
	</main>
</Layout>