Gids voor het bouwen van een Svelte-app met GraphQL-integratie
description
Door deze prompt te volgen, leren gebruikers hoe ze efficiënt gegevens kunnen ophalen en beheren in hun Svelte-toepassingen met GraphQL, wat de prestaties en schaalbaarheid van hun app verbetert.
prompt
try_prompt
Help me een Svelte-toepassing op te zetten die GraphQL gebruikt voor gegevensophaling. Beschrijf de stappen om een GraphQL-client op te zetten, queries en mutaties te ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een stapsgewijze handleiding om een Svelte-toepassing op te zetten die gebruikmaakt van GraphQL voor gegevensophaling, inclusief realtime updates:
1. Voorbereiding en installatie
--------------------------------
Zorg dat je een nieuw Svelte-project hebt, bijvoorbeeld met Vite:
```bash
npm create vite@latest mijn-svelte-app -- --template svelte
cd mijn-svelte-app
npm install
```
2. GraphQL-client installeren
-----------------------------
Gebruik een bibliotheek zoals `@urql/svelte` of `graphql-request`. Voor realtime ondersteuning en eenvoud kies ik `@urql/svelte`:
```bash
npm install @urql/svelte
```
3. Setup van de GraphQL-client
-----------------------------
Maak een bestand `src/lib/graphql.js` (of `.ts`) voor de client setup:
```javascript
import { createClient } from '@urql/svelte';
export const client = createClient({
url: 'https://api.voorbeeld.com/graphql',
// Optioneel: headers, caching, etc.
});
```
4. Provider toevoegen in `src/main.js`
--------------------------------------
In je hoofdbestand, bijvoorbeeld `src/main.js`, voeg de provider toe:
```javascript
import App from './App.svelte';
import { setClient } from '@urql/svelte';
import { client } from './lib/graphql';
setClient(client);
const app = new App({
target: document.body,
});
export default app;
```
5. Queries en Mutaties maken
--------------------------
In je Svelte-componenten gebruik je de `query` en `mutation` functies:
**Voorbeeld query (`src/Component.svelte`):**
```svelte
<script>
import { query } from '@urql/svelte';
const GET_DATA = `
query {
items {
id
naam
status
}
}
`;
const { data, fetching, error } = query({ query: GET_DATA });
</script>
{#if $fetching}
<p>Laden...</p>
{:else if $error}
<p>Fout: {$error.message}</p>
{:else}
<ul>
{#each $data.items as item}
<li>{item.naam} - {item.status}</li>
{/each}
</ul>
{/if}
```
**Voorbeeld mutatie:**
```svelte
<script>
import { mutation } from '@urql/svelte';
const UPDATE_STATUS = `
mutation($id: ID!, $status: String!) {
updateItem(id: $id, status: $status) {
id
status
}
}
`;
let itemId = '1';
let nieuweStatus = 'voltooid';
const updateStatus = () => {
mutation({ query: UPDATE_STATUS, variables: { id: itemId, status: nieuweStatus } });
};
</script>
<button on:click={updateStatus}>Status bijwerken</button>
```
6. Realtime gegevensupdates implementeren
------------------------------------------
Gebruik GraphQL Subscriptions voor realtime updates. `@urql/svelte` ondersteunt dit via WebSocket.
- Installeer WebSocket-ondersteuning:
```bash
npm install @urql/core subscriptions-transport-ws
```
- Pas de client-configuratie aan:
```javascript
import { createClient, defaultExchanges, subscriptionExchange } from '@urql/svelte';
import { SubscriptionClient } from 'subscriptions-transport-ws';
const subscriptionClient = new SubscriptionClient('wss://api.voorbeeld.com/graphql', {
reconnect: true,
});
export const client = createClient({
url: 'https://api.voorbeeld.com/graphql',
exchanges: [
...defaultExchanges,
subscriptionExchange({
forwardSubscription: (operation) => subscriptionClient.request(operation),
}),
],
});
```
- Gebruik een subscription in je component:
```svelte
<script>
import { subscription } from '@urql/svelte';
const NEW_ITEMS_SUBSCRIPTION = `
subscription {
newItem {
id
naam
status
}
}
`;
const { data, error } = subscription({ query: NEW_ITEMS_SUBSCRIPTION });
</script>
{#if $error}
<p>Fout bij realtime updates: {$error.message}</p>
{:else}
{#if $data}
<p>Nieuw item: {$data.newItem.naam}</p>
{/if}
{/if}
```
7. Samenvatting
----------------
- Installeer en configureer `@urql/svelte` met WebSocket-ondersteuning.
- Maak queries, mutaties en subscriptions.
- Gebruik de Svelte stores (`$data`, `$error`, `$fetching`) voor statusbeheer.
- Implementeer realtime updates via GraphQL subscriptions voor dynamische gegevens.
Met deze stappen heb je een Svelte-toepassing die efficiënt gegevens ophaalt, bijwerkt en realtime synchroniseert via GraphQL.
provider: deepseek
model: deepseek-chat
Hier is een stapsgewijze handleiding voor het opzetten van een Svelte-app met GraphQL, inclusief realtime updates:
## 1. Project setup en dependencies
```bash
npm create svelte@latest mijn-graphql-app
cd mijn-graphql-app
npm install
# GraphQL dependencies
npm install @apollo/client graphql svelte-apollo
npm install -D @graphql-typed-document-node/core
```
## 2. Apollo Client configuratie
Maak `src/lib/apollo.js`:
```javascript
import { ApolloClient, InMemoryCache, createHttpLink, split } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';
import { getMainDefinition } from '@apollo/client/utilities';
// HTTP link voor queries en mutaties
const httpLink = createHttpLink({
uri: 'https://api.voorbeeld.com/graphql',
});
// WebSocket link voor subscriptions (realtime)
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.voorbeeld.com/graphql', // WebSocket URL
connectionParams: () => ({
// Eventuele auth headers
authorization: localStorage.getItem('token') || '',
}),
}));
// Split link: subscriptions via WS, rest via HTTP
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink
);
export const client = new ApolloClient({
link: splitLink,
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
fetchPolicy: 'cache-and-network',
},
},
});
```
## 3. Svelte store voor globale state
Maak `src/stores/graphql.js`:
```javascript
import { writable } from 'svelte/store';
export const loading = writable(false);
export const error = writable(null);
export const userData = writable([]);
```
## 4. GraphQL queries en mutaties
Maak `src/lib/queries.js`:
```javascript
import { gql } from '@apollo/client';
// Query voor gegevens ophalen
export const GET_USERS = gql`
query GetUsers {
users {
id
name
email
createdAt
}
}
`;
// Mutation voor gegevens wijzigen
export const CREATE_USER = gql`
mutation CreateUser($name: String!, $email: String!) {
createUser(name: $name, email: $email) {
id
name
email
}
}
`;
// Subscription voor realtime updates
export const USER_SUBSCRIPTION = gql`
subscription OnUserCreated {
userCreated {
id
name
email
createdAt
}
}
`;
```
## 5. Hoofdcomponent met realtime functionaliteit
`src/routes/+page.svelte`:
```svelte
<script>
import { onMount } from 'svelte';
import { client } from '$lib/apollo';
import { mutation, query, subscribe } from 'svelte-apollo';
import { GET_USERS, CREATE_USER, USER_SUBSCRIPTION } from '$lib/queries';
import { loading, error, userData } from '$stores/graphql';
let name = '';
let email = '';
// Query voor gebruikers ophalen
const usersQuery = query(GET_USERS);
// Mutation voor gebruiker aanmaken
const createUserMutation = mutation(CREATE_USER);
// Realtime subscription
const userSubscription = subscribe(USER_SUBSCRIPTION);
onMount(() => {
// Luister naar realtime updates
const subscription = userSubscription.subscribe(({ data }) => {
if (data?.userCreated) {
console.log('Nieuwe gebruiker in realtime:', data.userCreated);
// Update de store of voeg toe aan bestaande data
$userData.update(users => [...users, data.userCreated]);
}
});
return () => subscription.unsubscribe();
});
async function handleSubmit() {
$loading = true;
$error = null;
try {
const result = await createUserMutation({
variables: { name, email }
});
if (result.data) {
name = '';
email = '';
console.log('Gebruiker aangemaakt:', result.data.createUser);
}
} catch (err) {
$error = err.message;
} finally {
$loading = false;
}
}
</script>
<svelte:head>
<title>GraphQL Svelte App</title>
</svelte:head>
<main>
<h1>GraphQL met Svelte - Realtime Updates</h1>
<!-- Formulier voor nieuwe gebruiker -->
<form on:submit|preventDefault={handleSubmit}>
<input
type="text"
bind:value={name}
placeholder="Naam"
required
/>
<input
type="email"
bind:value={email}
placeholder="E-mail"
required
/>
<button type="submit" disabled={$loading}>
{#if $loading}Bezig...{:else}Gebruiker aanmaken{/if}
</button>
</form>
<!-- Foutmelding -->
{#if $error}
<div class="error">{$error}</div>
{/if}
<!-- Gebruikerslijst -->
<div class="users">
<h2>Gebruikers ({$usersQuery.data?.users?.length || 0})</h2>
{#if $usersQuery.loading}
<p>Laden...</p>
{:else if $usersQuery.error}
<p class="error">Fout bij ophalen: {$usersQuery.error.message}</p>
{:else if $usersQuery.data?.users}
<ul>
{#each $usersQuery.data.users as user (user.id)}
<li>
<strong>{user.name}</strong> - {user.email}
<small>{new Date(user.createdAt).toLocaleDateString('nl-NL')}</small>
</li>
{/each}
</ul>
{:else}
<p>Geen gebruikers gevonden</p>
{/if}
</div>
<!-- Realtime notificatie -->
<div class="realtime-indicator">
🔄 Realtime updates actief
</div>
</main>
<style>
.error { color: red; margin: 10px 0; }
.users { margin-top: 20px; }
.realtime-indicator {
position: fixed;
top: 10px;
right: 10px;
background: #4CAF50;
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 12px;
}
</style>
```
## 6. App layout configuratie
`src/app.html` (of gebruik SvelteKit's layout systeem):
```html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
```
## 7. TypeScript ondersteuning (optioneel)
Voeg types toe in `src/app.d.ts`:
```typescript
declare global {
namespace App {
interface Locals {
user: import('$lib/types').User | null;
}
}
}
export {};
```
## Belangrijke punten:
1. **Realtime updates**: De subscription luistert naar nieuwe gebruikers en update de UI automatisch
2. **Error handling**: Fouten worden netjes afgehandeld en getoond aan de gebruiker
3. **Loading states**: Duidelijke feedback tijdens het laden
4. **Cache management**: Apollo Client zorgt voor optimale caching
5. **Type safety**: Gebruik TypeScript voor betere developer experience
## Start de applicatie:
```bash
npm run dev
```
Deze setup biedt een complete GraphQL-integratie met realtime functionaliteit, error handling en een professionele ontwikkelaarservaring.