Natuurlijk! Hier is een stapsgewijze uitleg en voorbeeldcode voor het bouwen van een Vue.js-component die via Apollo Client verbinding maakt met een GraphQL-eindpunt om realtime gegevens op te halen en weer te geven in een lijst. ### 1. Apollo Client instellen **a. Installeer de benodigde packages:** ```bash npm install @apollo/client graphql vue-apollo ``` **b. Configureer Apollo Client in je Vue-project:** Maak een bestand, bijvoorbeeld `apollo.js`: ```js import { ApolloClient, InMemoryCache, split, HttpLink } from '@apollo/client/core'; import { WebSocketLink } from '@apollo/client/link/ws'; import { getMainDefinition } from '@apollo/client/utilities'; const httpLink = new HttpLink({ uri: 'https://api.example.com/graphql', }); // Als je ook subscriptions via WebSocket wilt gebruiken voor realtime, kun je een WebSocketLink toevoegen. // Voor dit voorbeeld gebruiken we alleen HTTP voor queries en mutations. // Als je subscriptions hebt, configureer dan WebSocketLink en split. const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), }); export default apolloClient; ``` **c. Integreer Apollo in je Vue-app:** In je hoofd `main.js`: ```js import { createApp } from 'vue'; import { DefaultApolloClient } from '@vue/apollo-composable'; import App from './App.vue'; import apolloClient from './apollo'; const app = createApp(App); app.provide(DefaultApolloClient, apolloClient); app.mount('#app'); ``` ### 2. Vue-component maken met Apollo Query voor realtime gegevens Gebruik de `useQuery` composable uit `@vue/apollo-composable` om de gegevens op te halen en te beheren. ```vue <template> <div> <h2>Gebruikerslijst</h2> <ul> <li v-for="user in gebruikers" :key="user.id"> {{ user.naam }} </li> </ul> <p v-if="loading">Laden...</p> <p v-if="error">Fout bij laden: {{ error.message }}</p> </div> </template> <script> import { defineComponent } from 'vue'; import { useQuery, gql } from '@vue/apollo-composable'; const GET_GEGEVENS = gql` query { gebruikers { id naam } } `; export default defineComponent({ setup() { const { result, loading, error } = useQuery(GET_GEGEVENS, null, { pollInterval: 5000, // Optioneel: periodiek ophalen, niet realtime }); // Resultaat bevat de gegevens const gebruikers = computed(() => result.value ? result.value.gebruikers : []); return { gebruikers, loading, error, }; }, }); </script> ``` ### 3. Realtime updates afhandelen Voor echte realtime updates (bijvoorbeeld via GraphQL subscriptions), zou je een WebSocketLink moeten configureren en de `subscribe` query gebruiken. Dit vereist dat je GraphQL-eindpunt subscriptions ondersteunt. **Voorbeeld:** ```js // In apollo.js import { WebSocketLink } from '@apollo/client/link/ws'; const wsLink = new WebSocketLink({ uri: 'wss://api.example.com/graphql', options: { reconnect: true, }, }); const splitLink = split( ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === 'OperationDefinition' && definition.operation === 'subscription' ); }, wsLink, httpLink, ); const apolloClient = new ApolloClient({ link: splitLink, cache: new InMemoryCache(), }); ``` **En in je component:** ```js import { useSubscription, gql } from '@vue/apollo-composable'; const GEGEVENS_SUBSCRIPTION = gql` subscription { gebruikersUpdated { id naam } } `; const { result } = useSubscription(GEGEVENS_SUBSCRIPTION); ``` **Samenvatting:** - Installeer en configureer Apollo Client. - Gebruik `useQuery` voor het ophalen van gegevens. - Voor realtime updates, gebruik `useSubscription`. - Visualiseer de gegevens in een lijst met Vue directives. Als je nog vragen hebt of hulp nodig hebt met een specifieke implementatie, laat het gerust weten!

Ik help je graag een Vue.js-component te bouwen met Apollo Client voor GraphQL. Hier is een complete uitleg: ## 1. Apollo Client installeren en configureren Eerst installeer je de benodigde packages: ```bash npm install @apollo/client graphql ``` Maak een Apollo Client configuratiebestand (bijv. `apollo-client.js`): ```javascript import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core' import { provideApolloClient } from '@apollo/client' const httpLink = createHttpLink({ uri: 'https://api.example.com/graphql', }) const cache = new InMemoryCache() const apolloClient = new ApolloClient({ link: httpLink, cache, }) provideApolloClient(apolloClient) export default apolloClient ``` ## 2. Vue-app configureren In je `main.js`: ```javascript import { createApp } from 'vue' import App from './App.vue' import apolloClient from './apollo-client' const app = createApp(App) app.provide('apolloClient', apolloClient) app.mount('#app') ``` ## 3. Vue-component met GraphQL query Maak een component `GebruikersLijst.vue`: ```vue <template> <div class="gebruikers-lijst"> <h2>Gebruikerslijst</h2> <!-- Laadstatus --> <div v-if="loading" class="loading"> Gebruikers laden... </div> <!-- Foutmelding --> <div v-if="error" class="error"> Fout bij ophalen gebruikers: {{ error.message }} </div> <!-- Gebruikerslijst --> <div v-if="gebruikers && gebruikers.length > 0"> <ul class="gebruikers-lijst"> <li v-for="gebruiker in gebruikers" :key="gebruiker.id" class="gebruiker-item" > <span class="gebruiker-id">ID: {{ gebruiker.id }}</span> <span class="gebruiker-naam">Naam: {{ gebruiker.naam }}</span> </li> </ul> </div> <!-- Geen gebruikers gevonden --> <div v-else-if="!loading" class="geen-gebruikers"> Geen gebruikers gevonden </div> </div> </template> <script> import { useQuery } from '@vue/apollo-composable' import gql from 'graphql-tag' // GraphQL query const GEBRUIKERS_QUERY = gql` query GetGebruikers { gebruikers { id naam } } ` export default { name: 'GebruikersLijst', setup() { // Gebruik de useQuery composable const { result, loading, error } = useQuery(GEBRUIKERS_QUERY) // Bereken de gebruikerslijst reactief const gebruikers = computed(() => { return result.value?.gebruikers || [] }) return { gebruikers, loading, error } } } </script> <style scoped> .gebruikers-lijst { max-width: 600px; margin: 0 auto; padding: 20px; } .loading { text-align: center; color: #666; font-style: italic; } .error { color: #d32f2f; background-color: #ffebee; padding: 10px; border-radius: 4px; border: 1px solid #f44336; } .gebruiker-item { padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; } .gebruiker-id { font-weight: bold; color: #333; } .gebruiker-naam { color: #666; } .geen-gebruikers { text-align: center; color: #999; font-style: italic; } </style> ``` ## 4. Live updates met subscriptions (optioneel) Voor realtime updates kun je subscriptions toevoegen: ```javascript import { useSubscription } from '@vue/apollo-composable' const GEBRUIKER_TOEGEVOEGD_SUBSCRIPTION = gql` subscription OnGebruikerToegevoegd { gebruikerToegevoegd { id naam } } ` // In je setup(): const { onResult } = useSubscription(GEBRUIKER_TOEGEVOEGD_SUBSCRIPTION) onResult((result) => { if (result.data?.gebruikerToegevoegd) { // Nieuwe gebruiker toevoegen aan de lijst gebruikers.value.push(result.data.gebruikerToegevoegd) } }) ``` ## 5. Gebruik het component Importeer en gebruik het component in je app: ```vue <template> <div id="app"> <GebruikersLijst /> </div> </template> <script> import GebruikersLijst from './components/GebruikersLijst.vue' export default { name: 'App', components: { GebruikersLijst } } </script> ``` ## Belangrijke punten: - **useQuery**: Beheert de GraphQL query en reactieve updates - **Loading state**: Toont laadstatus tijdens data ophalen - **Error handling**: Vangt fouten netjes op - **Reactive updates**: Data wordt automatisch bijgewerkt - **Type safety**: Gebruik TypeScript voor betere ontwikkelervaring Deze component haalt gebruikersgegevens op van je GraphQL endpoint en toont ze in een lijst, met automatische updates wanneer de data verandert.