Svelte, GraphQL, and KitQL

• Svelte
• KitQL
• KitQL Docs
• CartQL

schema: ${VITE_GRAPHQL_ENDPOINT}
documents: "**/*.{graphql,gql}"
generates:
  ./src/lib/graphql/_kitql/graphqlTypes.ts:
    plugins:
      - typescript
      - typescript-operations
      - typed-document-node
      - typescript-document-nodes
  ./src/lib/graphql/_kitql/graphqlStores.ts:
    plugins:
      - "@kitql/graphql-codegen"
    config:
      importBaseTypesFrom: $lib/graphql/_kitql/graphqlTypes
config:
  useTypeImports: true

import { KitQLClient } from "@kitql/client";

const url = import.meta.env.VITE_GRAPHQL_ENDPOINT;

export const kitQLClient = new KitQLClient({
  url,
  credentials: "omit",
  headersContentType: "application/json",
  logType: ["client", "server", "operationAndvariables"],
  // endpointSSRDelayMs: 500, // nice to demo delay in SSR mode
  // endpointNetworkDelayMs: 1000, // Nice to demo delay in Network mode
});

const addToCart = async (input) => {
  const optimisticData = $KQL_GetCartById.data;
  optimisticData.cart.subTotal.formatted = "Refreshing";
  KQL_GetCartById.patch(
    optimisticData,
    {
      id: kitqlCartId,
    },
    "store-only"
  );

  const { data } = await KQL_AddToCart.mutate({
    variables: {
      input,
    },
  });

  KQL_GetCartById.patch(
    {
      cart: data.addItem,
    },
    {
      id: kitqlCartId,
    },
    "cache-and-store"
  );
};

<script lang="ts">
  export let kitqlCartId: string;

  const removeFromCart = async (input) => {
    // patch with optimistic data
    const optimisticData = $KQL_GetCartById.data;
    optimisticData.cart.subTotal.formatted = `Removing items...`;
    KQL_GetCartById.patch(optimisticData, { id: kitqlCartId }, "store-only");

    // send mutation
    const { data } = await KQL_RemoveFromCart.mutate({
      variables: {
        input,
      },
    });

    // patch with real data
    KQL_GetCartById.patch(
      { cart: data.removeItem },
      { id: kitqlCartId },
      "cache-and-store"
    );
  };

  $: cart = $KQL_GetCartById.data?.cart;
</script>