useApi composable

useApi composable allows to execute received GraphQL query with optional variables and headers and returns the result.

API

useApi composable returns the following properties:

• query - function that executes a GraphQL query and handle its error and result
• mutate - function that executes received GraphQL Mutation with optional variables and headers and returns the result.

Interfaces

type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';

type Variables = {
  [key: string]: any;
};

type Error = {
  message: string;
  locations?: {
    line: number;
    column: number;
  }[];
  path?: string[];
  extensions?: any;
};

type Request = <DATA, VARIABLES extends Variables = Variables>(
  request: string,
  variables?: VARIABLES,
  fetchPolicy?: FetchPolicy,
) => Promise<{ data: DATA, errors: Error[] }>;

interface UseApiInterface {
  query: Request;
  mutate: Request;
}

Example

Execute a GraphQL query to get cart price:

import { useApi } from '~/composables/useApi';

const GET_CART_PRICE_QUERY = `
  query GET_CART_PRICE_QUERY($cartId: String!) {
    cart(cart_id: $cartId) {
      prices {
        subtotal_excluding_tax {
          value
        }
      }
    }
  }
`;

export default {
  setup() {
    const { query } = useApi();

    async function getCartPrice(cartId: string) {
      return await query(
        GET_CART_PRICE_QUERY,
        { cartId },
        { 'Accept': 'application/json' }
      );
    }
  }
};