Saleor GraphQL API Frontend Integration

Integrating Saleor GraphQL API with Frontend

Saleor provides a single GraphQL endpoint for all operations — catalog, cart, checkout, payments, account. The frontend works directly with this API without an intermediate REST layer. Integration is built on Apollo Client or urql, with type generation via @graphql-codegen.

Setting Up Apollo Client

// lib/apolloClient.ts
import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
  from,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { onError } from "@apollo/client/link/error";

const httpLink = createHttpLink({
  uri: process.env.NEXT_PUBLIC_SALEOR_API_URL,
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("saleor_token");
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, extensions }) => {
      if (extensions?.code === "AUTHENTICATION_FAILED") {
        localStorage.removeItem("saleor_token");
        window.location.href = "/login";
      }
    });
  }
});

export const client = new ApolloClient({
  link: from([errorLink, authLink, httpLink]),
  cache: new InMemoryCache({
    typePolicies: {
      Product: { keyFields: ["id"] },
      ProductVariant: { keyFields: ["id"] },
      Checkout: { keyFields: ["id"] },
    },
  }),
});

Type Generation via Codegen

# codegen.yml
overwrite: true
schema: "https://api.your-store.com/graphql/"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHooks: true
      withComponent: false
      scalars:
        JSON: "Record<string, unknown>"
        Date: "string"
        Decimal: "string"
        UUID: "string"
        PositiveDecimal: "number"

npx graphql-codegen --config codegen.yml

Result — fully typed hooks like useProductListQuery, useCheckoutCreateMutation, etc.

Catalog: Product List with Pagination

# queries/products.graphql
query ProductList(
  $first: Int
  $after: String
  $filter: ProductFilterInput
  $channel: String!
) {
  products(first: $first, after: $after, filter: $filter, channel: $channel) {
    edges {
      node {
        id
        name
        slug
        thumbnail { url alt }
        pricing {
          priceRange {
            start { gross { amount currency } }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

const { data, fetchMore } = useProductListQuery({
  variables: { first: 24, channel: "default-channel" },
});

const loadMore = () => {
  fetchMore({
    variables: { after: data?.products?.pageInfo.endCursor },
    updateQuery: (prev, { fetchMoreResult }) => {
      if (!fetchMoreResult) return prev;
      return {
        products: {
          ...fetchMoreResult.products,
          edges: [
            ...prev.products!.edges,
            ...fetchMoreResult.products!.edges,
          ],
        },
      };
    },
  });
};

Checkout Flow

Saleor separates checkout into explicit mutations. Full flow:

// 1. Create checkout
const [createCheckout] = useCheckoutCreateMutation();
const { data } = await createCheckout({
  variables: {
    input: {
      channel: "default-channel",
      lines: [{ variantId, quantity: 1 }],
      email: "[email protected]",
    },
  },
});
const checkoutId = data?.checkoutCreate?.checkout?.id;

// 2. Add shipping address
const [updateShippingAddress] = useCheckoutShippingAddressUpdateMutation();
await updateShippingAddress({
  variables: {
    id: checkoutId,
    shippingAddress: {
      firstName: "Ivan",
      lastName: "Petrov",
      streetAddress1: "ul. Lenina 1",
      city: "Moscow",
      country: CountryCode.Ru,
      postalCode: "101000",
    },
  },
});

// 3. Select shipping method
const [updateDelivery] = useCheckoutDeliveryMethodUpdateMutation();
await updateDelivery({
  variables: { id: checkoutId, deliveryMethodId: shippingMethodId },
});

// 4. Create payment
const [createPayment] = useCheckoutPaymentCreateMutation();
await createPayment({
  variables: {
    id: checkoutId,
    input: {
      gateway: "mirumee.payments.stripe",
      token: stripeToken,
      amount: checkoutTotal,
    },
  },
});

// 5. Complete order
const [completeCheckout] = useCheckoutCompleteMutation();
const order = await completeCheckout({ variables: { id: checkoutId } });

User Authentication

// Login
const [tokenCreate] = useTokenCreateMutation();
const { data } = await tokenCreate({
  variables: { email, password },
});
const { token, refreshToken, errors } = data!.tokenCreate!;

if (!errors?.length) {
  localStorage.setItem("saleor_token", token!);
  localStorage.setItem("saleor_refresh_token", refreshToken!);
}

// Token refresh
const [tokenRefresh] = useTokenRefreshMutation();
const refreshed = await tokenRefresh({
  variables: { token: localStorage.getItem("saleor_refresh_token")! },
});

Error Handling in Saleor

Saleor returns errors not via standard GraphQL errors, but through the errors field in the mutation response body. Handling pattern:

function handleSaleorErrors<T extends { errors: SaleorError[] }>(
  result: T | null | undefined,
  onSuccess: (data: T) => void
) {
  if (!result) return;
  if (result.errors.length > 0) {
    result.errors.forEach((err) => {
      console.error(`${err.field}: ${err.message} (${err.code})`);
    });
    return;
  }
  onSuccess(result);
}

Performance

• Saleor supports persisted queries — send hash instead of query text
• Use fragments for reusing fields across queries
• InMemoryCache with proper keyFields prevents data duplication
• For SSR (Next.js) — @apollo/experimental-nextjs-app-support or getStaticProps with client.query()

Integration Timeframes