Aangepaste queries & fragments

Afosto stelt ontwikkelaars in staat om op maat gemaakte GraphQL-query's en mutaties te maken, waardoor ze meer controle en flexibiliteit hebben bij het interageren met de Afosto API. Fragmenten kunnen ook worden gebruikt om een reeks velden te selecteren en opnieuw te gebruiken in verschillende query's en mutaties.

Aangepaste query's

Query's worden gebruikt om gegevens op te halen uit jouw Afosto API. Hieronder staat een voorbeeld van hoe je een aangepaste query kunt gebruiken:

```js
import { gql } from '@afosto/storefront';

// Write your query
const query = gql`
  query getCart($id: String!) {
    cart(id: $id) {
      subtotal
      total
      items {
        ids
        image
        label
        sku
      }
    }
  }
`;

// Define your variables
const variables = {
  id: 'my_cart_token',
};

// Execute the query
const response = await client.query(query, variables);

## Aangepast mutaties

Mutaties worden gebruikt om gegevens te wijzigen in jouw Afosto API. Hieronder staat een voorbeeld van hoe je een aangepaste mutatie kunt gebruiken:

import StorefrontClient, { gql } from '@afosto/storefront';

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',
});

// Write your mutation
const mutation = gql`
  mutation AddPhoneNumberToCart($add_phone_number_to_cart: AddPhoneNumberToCartInput!) {
    AddPhoneNumberToCartInput(input: $add_phone_number_to_cart) {
      cart {
        phone_number {
          id
          country_code
          number
          national
          type
          created_at
        }
      }
    }
  }
`;

// Define your variables
const variables = {
  AddPhoneNumberToCartInput: {
    cartId: currentCartToken,
  },
};

// Execute the mutation
const response = await client.query(mutation, variables);

## Aangepaste fragmenten

Fragmenten zijn herbruikbare eenheden die een reeks velden definiëren die je wilt opnemen in jouw queries of mutaties. de [@afosto/storefront](https://github.com/afosto/storefront) package exporteert alle fragmenten die in de client worden gebruikt. Je kunt deze bekijken op [GitHub](https://github.com/afosto/storefront/tree/main/src/fragments) ter inspiratie voor je eigen fragmenten.

import { gql } from '@afosto/graphql-client';

// Define your fragment
const CustomCartFragment = gql`
  fragment CustomCartFragment on Cart {
    total
    total_excluding_vat
    ... other fields
  }
`;

// Write your query with the fragment
const query = gql`
	${CustomCartFragment}
  query getCart($id: String!) {
    cart(id: $id) {
      ...CustomCartFragment
    }
  }
`;

// Define your variables
const variables = {
  id: client.getCartTokenFromStorage(),
};

// Execute the query
const response = await client.query(query, variables);

## Verkennen van queries en mutaties

Je kunt je queries en mutaties verkennen en testen in de Afosto GraphQL playground op [https://afosto.app/graphql](https://afosto.app/graphql). Hier kun je door het schema en de documentatie bladeren en je queries en mutaties testen.