Getting Started with @woographql/react-hooks

Quick setup guide for @woographql/react-hooks - a React hook library for headless WooCommerce storefronts powered by GraphQL for WooCommerce.

Note: If you're using @woographql/next, most of this setup is handled automatically. The session provider, token manager, and operations are pre-configured based on your project settings.

This package is hosted on a private registry. Access requires a valid WooGraphQL Pro license.

Create or update .npmrc in your project root:

registry=https://registry.npmjs.org/
@woographql:registry=https://yeetsquad.net/
//yeetsquad.net/:_authToken="YOUR_LICENSE_KEY"
always-auth=true

Replace YOUR_LICENSE_KEY with your WooGraphQL Pro license key.

npm install @woographql/react-hooks @woographql/session-utils

• WordPress with WPGraphQL and GraphQL for WooCommerce
• React 18+
• Optional: WPGraphQL JWT Authentication for user authentication
• Optional: WooGraphQL Pro for Bundle, Composite, Subscription products and Product Add-ons

// SessionProvider.tsx
import { PropsWithChildren, Context } from 'react';
import { useContext } from 'react';
import {
  useAsyncSessionManager,
  createSessionContext,
  SessionData,
  SessionOperations,
} from '@woographql/react-hooks';
import { AsyncTokenManagerInterface } from '@woographql/session-utils';

export interface AppSessionData extends SessionData<AsyncTokenManagerInterface> {}

export const sessionContext = createSessionContext<AppSessionData, AsyncTokenManagerInterface>();
export const useSession = () => useContext(sessionContext);

export function SessionProvider({
  children,
  tokenManager,
  operations,
}: PropsWithChildren<{
  tokenManager: AsyncTokenManagerInterface;
  operations: SessionOperations<AppSessionData>;
}>) {
  const store = useAsyncSessionManager<AppSessionData>(
    tokenManager,
    operations,
    { startOnMount: true }
  );

  const Provider = sessionContext.Provider as Context<AppSessionData>['Provider'];
  return <Provider value={store}>{children}</Provider>;
}

import { SessionProvider } from './SessionProvider';

export function App({ children }) {
  return (
    <SessionProvider tokenManager={tokenManager} operations={operations}>
      {children}
    </SessionProvider>
  );
}

'use client';
import { useSession } from './SessionProvider';

export function Header() {
  const { customer, cart, isAuthenticated, logout, isExecuting } = useSession();

  return (
    <header>
      <a href="/cart">Cart ({cart?.contents?.itemCount ?? 0})</a>
      {isAuthenticated ? (
        <button onClick={() => logout()} disabled={isExecuting()}>
          Logout
        </button>
      ) : (
        <a href="/login">Login</a>
      )}
    </header>
  );
}

This library includes built-in support for WooGraphQL Pro features:

• Bundle Products - addBundleToCart mutation
• Composite Products - addCompositeToCart mutation
• Subscription Products - Full subscription support
• Product Add-ons - Add-on field support on cart mutations

See useCartMutations for detailed examples.

• useSessionManager - Complete session management API with examples
• useCartMutations - Cart operations including WooGraphQL Pro features
• useCartMutationsWithCart - Standalone cart operations
• useProduct - Product context and variation selection