WooGraphQL

https://woographql.com/docs
Admin
WooGraphQL is a WPGraphQL extension that integrates WooCommerce with GraphQL, enabling headless...
Tokens:38,934
Snippets:327
Trust Score:7.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Test Environment

Source: https://woographql.com/docs/local-testing

Installs and configures a local WordPress testing environment using Composer. This script creates and sets up a temporary WordPress installation for testing purposes.

```bash
composer install-test-env
```

--------------------------------

### Basic Codeception WPUnit Test Structure

Source: https://woographql.com/docs/local-testing

This is the standard structure for a Codeception WPUnit test file. It includes `setUp` and `tearDown` methods for test environment setup and cleanup, and a placeholder `testMe` method for test logic.

```php
<?php

class ItemCountTest extends \Codeception\TestCase\WPTestCase
{

    public function setUp(): void {
        // before
        parent::setUp();

        // your set up methods here
    }

    public function tearDown(): void {
        // your tear down methods here

        // then
        parent::tearDown();
    }

    // tests
    public function testMe()
    {
    }
}

```

--------------------------------

### ApolloLink Example (Verbose)

Source: https://woographql.com/docs/configuring-graphql-client-for-user-session

Demonstrates an alternative, more verbose way to create a stateless link using the `ApolloLink` class directly. This approach is generally overkill for simple middleware callbacks.

```javascript
import { ApolloLink } from '@apollo/client';

const consoleLink = new ApolloLink((operation, forward) => {
  operation.setContext(/* our callback */);
  return forward(operation);
});
```

--------------------------------

### Copy .env.dist to .env

Source: https://woographql.com/docs/local-testing

Copies the environment configuration file for testing. Ensure this file is updated to match your local machine setup.

```bash
cp .env.testing .env
```

--------------------------------

### BundleProduct Component Setup in React

Source: https://woographql.com/docs/using-product-bundle-data-and-mutations

Sets up the `BundleProduct` component for displaying product bundles. Requires `useCartMutations`, `useSession`, `LoadingSpinner`, and `CartCard` imports.

```javascript
import React, { useState } from 'react';
import useCartMutations from './useCartMutations';
import { useSession } from './SessionProvider';
import { LoadingSpinner } from './LoadingSpinner';
import { CartCard } from './CartCard';

// ... rest of the code from the provided sample ...

export function BundleCard({ product }) {
  // ... rest of the code from the provided sample ...
}
```

--------------------------------

### Set up React App with React Router

Source: https://woographql.com/docs/routing-by-uri

Basic React application setup using React Router for defining routes. This component sets up the main router and a route for the shop page.

```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ShopPage from './ShopPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/shop" component={ShopPage} />
      </Switch>
    </Router>
  );
}

export default App;
```

--------------------------------

### Get Product Query

Source: https://woographql.com/docs/using-cart-data

Retrieves detailed information about a specific product using its ID.

```APIDOC
## GetProduct

### Description
Fetches detailed information for a single product.

### Method
Query

### Endpoint
N/A (GraphQL)

### Parameters
#### Query Parameters
- **id** (ID!) - Required - The ID of the product.
- **idType** (ProductIdTypeEnum) - Optional - The type of ID to use (e.g., DATABASE_ID, SLUG, SKU).
```

--------------------------------

### Send `woocommerce-session` Header with Fetch

Source: https://woographql.com/docs/configuring-graphql-client-for-user-session

Use this example to send the `woocommerce-session` header with a `fetch` request. The session token is read from `localStorage`. This example does not retrieve the updated token from the `woocommerce-session` HTTP response header.

```javascript
fetch(endpoint, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'woocommerce-session': `Session ${sessionToken}`,
  },
  body: JSON.stringify({
    query: `
      query {
        cart {
          contents {
            nodes {
              key
              product {
                node {
                  id
                  name
                }
              }
              quantity
              subtotal
            }
          }
        }
      }
    `,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));
```

--------------------------------

### Generate WPUnit Test File with Codeception

Source: https://woographql.com/docs/local-testing

Use the Codeception `generate:wpunit` command to create a new test file for your WPGraphQL WooCommerce project. This command simplifies the setup for new tests.

```bash
vendor/bin/codecept generate:wpunit wpunit "ItemCount"
```

--------------------------------

### PHPUnit Assertion Example

Source: https://woographql.com/docs/local-testing

A simple example of using PHPUnit's `assertEquals` method to assert that a value matches an expected outcome. This is a fundamental part of writing tests.

```php
$this->assertEquals( array( 5 ), [ 5 ] );

```

--------------------------------

### Get Cart Query

Source: https://woographql.com/docs/using-cart-data

Retrieves the current state of the shopping cart and customer information.

```APIDOC
## GetCart

### Description
Fetches the contents of the current shopping cart and associated customer data.

### Method
Query

### Endpoint
N/A (GraphQL)

### Parameters
#### Query Parameters
- **customerId** (Int) - Optional - The ID of the customer to retrieve cart and customer information for.
```

--------------------------------

### Example Usage of useCartMutations in a React Component

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Demonstrates how to integrate the `useCartMutations` hook within a React component to manage product quantities in the cart. It fetches product data and uses the hook to handle add, update, and remove actions.

```javascript
import React, { useEffect, useState } from 'react';
import { useQuery } from '@apollo/client';
import { GetProduct } from './graphql';

const SingleProduct = ({ productId }) => {
  const [quantity, setQuantity] = useState(1);
  const { data, loading, error } = useQuery(GetProduct, {
    variables: { id: productId, idType: 'DATABASE_ID' },
  });
  const { quantityInCart: inCart, mutate, loading } = useCartMutations(productId);

  useEffect(() => {
    if (inCart) {
      setQuantity(inCart);
    }
  }, [inCart])

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const handleAddOrUpdateAction = async () => {
    mutate({ quantity });
  }

  const handleRemoveAction = async () => {

```

--------------------------------

### Define GraphQL Fragments and Queries for Product Data

Source: https://woographql.com/docs/using-product-data

Defines GraphQL fragments for product content and a query to fetch a single product. This setup is essential for retrieving detailed product information in a headless WooCommerce application.

```javascript
import { gql } from '@apollo/client';

export const ProductContentFull = gql`
  fragment ProductContentFull on Product {
    id
    databaseId
    slug
    name
    type
    description
    shortDescription(format: RAW)
    image {
      id
      sourceUrl
      altText
    }
    galleryImages {
      nodes {
        id
        sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
        altText
      }
    }
    productTags(first: 20) {
      nodes {
        id
        slug
        name
      }
    }
    attributes {
      nodes {
        id
        attributeId
        ... on LocalProductAttribute {
          name
          options
          variation
        }
        ... on GlobalProductAttribute {
          name
          options
          variation
        }
      }
    }
    ... on SimpleProduct {
      onSale
      stockStatus
      price
      rawPrice: price(format: RAW)
      regularPrice
      salePrice
      stockStatus
      stockQuantity
      soldIndividually
    }
    ... on VariableProduct {
      onSale
      price
      rawPrice: price(format: RAW)
      regularPrice
      salePrice
      stockStatus
      stockQuantity
      soldIndividually
      variations(first: 50) {
        nodes {
          id
          databaseId
          name
          price
          rawPrice: price(format: RAW)
          regularPrice
          salePrice
          onSale
          attributes {
            nodes {
              name
              label
              value
            }
          }
        }
      }
    }
  }
`;

export const GetProduct = gql`
  query GetProduct($id: ID!, $idType: ProductIdTypeEnum) {
    product(id: $id, idType: $idType) {
      ...ProductContentFull
    }
  }
`;
```

--------------------------------

### GraphQL Query to Get Product Details

Source: https://woographql.com/docs/using-cart-data

This query fetches a single product's full details using its ID and ID type. It utilizes the `ProductContentFull` fragment to retrieve comprehensive product information.

```javascript
export const GetProduct = gql`
  query GetProduct($id: ID!, $idType: ProductIdTypeEnum) {
    product(id: $id, idType: $idType) {
      ...ProductContentFull
    }
  }
`;
```

--------------------------------

### Modify ProductListing Component for Subscriptions

Source: https://woographql.com/docs/using-subscription-data-and-mutations

Adapt the ProductListing component to display subscription-specific information such as subscription price, period, and interval. This example shows how to render these fields alongside the product name and includes a placeholder for adding the product to the cart.

```javascript
function ProductListing({ product }) {
  // ... other code

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
      <p>Subscription Price: {product.subscriptionPrice}</p>
      <p>Subscription Period: {product.subscriptionPeriod}</p>
      // ... other product details
      <button onClick={() => addToCart(product.id)}>Add to Cart</button>
    </div>
  );
};
```

--------------------------------

### GraphQL Query for Cart Contents

Source: https://woographql.com/docs/local-testing

This is an example GraphQL query to retrieve cart contents and item count. It demonstrates a query that might initially fail due to an incorrect field.

```graphql
query {
    cart {
        contents {
            nodes {
                quantity
            }
        }
        itemCount
    }
}
```

--------------------------------

### Setting up Test Scenario with Product and Cart Factories

Source: https://woographql.com/docs/local-testing

This PHP code snippet demonstrates how to set up a test scenario using WPGraphQLTestCase factories to create products and add them to the cart.

```php
public function testMe() {
    // Our scenario
    $products = [
        [
            'product_id' => $this->factory->product->createSimple(),
            'quantity'   => 1,
        ],
        [
            'product_id' => $this->factory->product->createSimple(),
            'quantity'   => 1,
        ],
        [
            'product_id' => $this->factory->product->createSimple(),
            'quantity'   => 2,
        ],
        [
            'product_id' => $this->factory->product->createSimple(),
            'quantity'   => 3,
        ],
    ];

    $this->factory->cart->add( ...$products );
}
```

--------------------------------

### Set up Single Product Component with GetProduct Query

Source: https://woographql.com/docs/using-product-data

Initializes a React component to fetch single product data using the `GetProduct` GraphQL query. Handles loading and error states. Requires `productId` as a prop.

```javascript
import React from 'react';
import { useQuery } from '@apollo/client';
import { GetProduct } from './graphql';

const SingleProduct = ({ productId }) => {
  const { data, loading, error } = useQuery(GetProduct, {
    variables: { id: productId, idType: 'DATABASE_ID' },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const product = data.product;

  return (
    <div className="single-product">
      {/* Render product information here */}
    </div>
  );
};

export default SingleProduct;
```

--------------------------------

### Environment Variables Sample (.env)

Source: https://woographql.com/docs/configuring-graphql-client-for-user-session

A sample `.env` file demonstrating how to store configuration values such as session token keys, authentication token keys, timeouts, and GraphQL endpoint URLs.

```dotenv
SESSION_TOKEN_LS_KEY=my_session_token
REFRESH_TOKEN_LS_KEY=my_refresh_token
AUTH_TOKEN_LS_KEY=my_auth_token
AUTH_KEY_TIMEOUT=30000
GRAPHQL_ENDPOINT=http://woographql.local/graphql
```

--------------------------------

### Get Product Variation Query

Source: https://woographql.com/docs/using-cart-data

Retrieves detailed information about a specific product variation using its database ID.

```APIDOC
## GetProductVariation

### Description
Fetches detailed information for a specific product variation.

### Method
Query

### Endpoint
N/A (GraphQL)

### Parameters
#### Query Parameters
- **id** (ID!) - Required - The database ID of the product variation.
```

--------------------------------

### JavaScript `time` Function

Source: https://woographql.com/docs/harmonizing-with-wordpress

Recreates the PHP `time` function in JavaScript to get the current Unix timestamp. Used for nonce generation.

```javascript
function time() {
  return Math.floor(new Date().getTime() / 1000);
}
```

--------------------------------

### Get Auth Token

Source: https://woographql.com/docs/handling-user-authentication

Retrieves the auth token from sessionStorage. If not found or invalid, it attempts to fetch a new one using `fetchAuthToken`.

```javascript
export async function getAuthToken() {
  let authToken = sessionStorage.getItem(process.env.AUTH_TOKEN_SS_KEY );
  if (!authToken || !tokenSetter) {
    authToken = await fetchAuthToken();
  }
  return authToken;
}
```

--------------------------------

### Run WPUnit Tests

Source: https://woographql.com/docs/local-testing

Executes all WordPress unit tests using the Codeception test runner. This command is used to verify the functionality of your WPGraphQL and WooGraphQL code in a local testing environment.

```bash
vendor/bin/codecept run wpunit
```

--------------------------------

### Environment Variables for Testing

Source: https://woographql.com/docs/testing-quick-start

Configuration variables for Docker, local Codeception, and the install-wp-tests script. Modify the .env file for your specific usage.

```env
# docker ENV variables
DB_NAME=wordpress
DB_HOST=app_db
DB_USER=wordpress
DB_PASSWORD=wordpress
WP_TABLE_PREFIX=wp_
WP_URL=http://localhost
WP_DOMAIN=localhost
ADMIN_EMAIL=admin@example.com
ADMIN_USERNAME=admin
ADMIN_PASSWORD=password
ADMIN_PATH=/wp-admin

# local codeception/install-wp-tests ENV variables
TEST_DB_NAME=woographql_tests
TEST_DB_HOST=127.0.0.1
TEST_DB_USER=wordpress
TEST_DB_PASSWORD=wordpress
TEST_WP_TABLE_PREFIX=wp_

# install-wp-tests ENV variables
SKIP_DB_CREATE=false
TEST_WP_ROOT_FOLDER=/tmp/wordpress
TEST_ADMIN_EMAIL=admin@wp.test

# codeception ENV variables
TESTS_DIR=tests
TESTS_OUTPUT=tests/_output
TESTS_DATA=tests/_data
TESTS_SUPPORT=tests/_support
TESTS_ENVS=tests/_envs
```

--------------------------------

### Run All Test Suites with Docker Compose

Source: https://woographql.com/docs/testing-quick-start

Execute acceptance, functional, and WPUnit tests simultaneously using Docker Compose. Optional flags for debug output and code coverage are available.

```bash
docker-compose run --rm \
-e SUITES=acceptance;wpunit;functional \
-e DEBUG=1 -e COVERAGE=1 testing --scale app=0
```

--------------------------------

### Update NodeByUri Query for Pagination

Source: https://woographql.com/docs/routing-by-uri

Modify the `NodeByUri` GraphQL query to include `first` and `after` variables. These variables control the number of items fetched and the starting point for paginated data.

```graphql
query NodeByUri($uri: ID!, $first: Int, $after: String) {
  nodeByUri(uri: $uri) {
    ... on Product {
      id
      name
      shortDescription
      price
      image {
        sourceUrl
        altText
      }
    }
      contentNodes(first: $first, after: $after) {
        edges {
          cursor
          node {
            ... on Product {
              id
              name
              shortDescription
              ... on SimpleProduct {
                  price
              }
              ... on VariableProduct {
                  price
              }
              image {
                sourceUrl
                altText
              }
            }
          }
        }
        pageInfo {
          hasNextPage
          endCursor
        }
      }
  }
}
```

--------------------------------

### Login

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Authenticates a customer using username and password, returning authentication tokens.

```APIDOC
## Login

### Description
Authenticates a customer using their username and password, returning authentication tokens and customer details.

### Method
Mutation

### Endpoint
N/A (GraphQL Operation)

### Parameters
#### Request Body
- **username** (String!) - Required - The customer's username.
- **password** (String!) - Required - The customer's password.

### Response
#### Success Response (200)
- **authToken** - String - The authentication token for the session.
- **refreshToken** - String - The refresh token for obtaining new authentication tokens.
- **customer** - Object - Details of the logged-in customer.

```

--------------------------------

### GraphQL Query to Get Product Variation Details

Source: https://woographql.com/docs/using-cart-data

This query retrieves the details of a specific product variation using its database ID. It uses the `VariationContent` fragment for fetching variation-specific data.

```javascript
export const GetProductVariation = gql`
  query GetProductVariation($id: ID!) {
    productVariation(id: $id, idType: DATABASE_ID) {
      ...VariationContent
    }
  }
`;
```

--------------------------------

### Display Product Dimensions and Weight in Component

Source: https://woographql.com/docs/using-product-data

Renders the fetched dimensions (width, height, length) and weight of the product within the Single Product component.

```javascript
<div className="dimensions">
  <strong>Dimensions:</strong> {product.dimensions.width} x {product.dimensions.height} x {product.dimensions.length}
</div>
<div className="weight">
  <strong>Weight:</strong> {product.weight}
</div>
```

--------------------------------

### GraphQL Query Fragment for Product Dimensions and Weight

Source: https://woographql.com/docs/using-product-data

Extends the `GetProduct` query by adding fields for `dimensions` (width, height, length) and `weight` to the `SimpleProduct` and `VariableProduct` fragments.

```graphql
dimensions {
  width
  height
  length
}
weight
```

--------------------------------

### Executing GraphQL Query via WPGraphQL Helper

Source: https://woographql.com/docs/local-testing

This PHP code snippet shows how to execute a GraphQL query using the `graphql()` helper method provided by WPGraphQLTestCase, passing the query as an argument.

```php
public function testItemCountField() {
    // Our scenario
    ...

    $response = $this->graphql( [ 'query' => $query ] );
}
```

--------------------------------

### Run WPUnit Test in Debug Mode

Source: https://woographql.com/docs/local-testing

This command executes the 'ItemCountTest' using Codeception's WPUnit runner. The `--debug` flag is crucial for inspecting the raw GraphQL response directly in the console, aiding in troubleshooting and understanding WPGraphQL's output.

```bash
vendor/bin/codecept run wpunit ItemCountTest --debug
```

--------------------------------

### Create Apollo Client Instance with Session Link

Source: https://woographql.com/docs/configuring-graphql-client-for-user-session

Instantiate Apollo Client, incorporating a chain of links including a custom session link, error link, update link, and an HTTP link. The order of these links is crucial for request processing.

```javascript
import { from } from '@apollo/client';

// ...

const client = new ApolloClient({
  link: from([
    createSessionLink(),
    createErrorLink(),
    createUpdateLink(),
    new HttpLink({ uri: endpoint }),
  ]),
  cache: new InMemoryCache(),
});
```

--------------------------------

### GraphQL Fragment for Simple and Variable Product Content

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Defines fragments for basic product details, including ID, name, slug, type, image, price, and sale information. Use for retrieving essential product data.

```graphql
export const ProductContentSlice = gql`
  fragment ProductContentSlice on Product {
    id
    databaseId
    name
    slug
    type
    image {
      id
      sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
      altText
    }
    ... on SimpleProduct {
      price
      regularPrice
      soldIndividually
    }
    ... on VariableProduct {
      price
      regularPrice
      soldIndividually
    }
  }
`;
```

```graphql
export const ProductVariationContentSlice = gql`
  fragment ProductVariationContentSlice on ProductVariation {
    id
    databaseId
    name
    slug
    image {
      id
      sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
      altText
    }
    price
    regularPrice
  }
`;
```

```graphql
export const ProductContentFull = gql`
  fragment ProductContentFull on Product {
    id
    databaseId
    slug
    name
    type
    description
    shortDescription(format: RAW)
    image {
      id
      sourceUrl
      altText
    }
    galleryImages {
      nodes {
        id
        sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
        altText
      }
    }
    productTags(first: 20) {
      nodes {
        id
        slug
        name
      }
    }
    attributes {
      nodes {
        id
        attributeId
        ... on LocalProductAttribute {
          name
          options
          variation
        }
        ... on GlobalProductAttribute {
          name
          options
          variation
        }
      }
    }
    ... on SimpleProduct {
      onSale
      stockStatus
      price
      rawPrice: price(format: RAW)
      regularPrice
      salePrice
      stockStatus
      stockQuantity
      soldIndividually
    }
    ... on VariableProduct {
      onSale
      price
      rawPrice: price(format: RAW)
      regularPrice
      salePrice
      stockStatus
      stockQuantity
      soldIndividually
      variations(first: 50) {
        nodes {
          id
          databaseId
          name
          price
          rawPrice: price(format: RAW)
          regularPrice
          salePrice
          onSale
          attributes {
            nodes {
              name
              label
              value
            }
          }
        }
      }
    }
  }
`;
```

```graphql
export const VariationContent = gql`
  fragment VariationContent on ProductVariation {
    id
    name
    slug
    price
    regularPrice
    salePrice
    stockStatus
    stockQuantity
    onSale
    image {
      id
      sourceUrl
      altText
    }
  }
`;
```

--------------------------------

### Implement Login Callback Function

Source: https://woographql.com/docs/handling-user-authentication

Handles the user login process by sending credentials to the GraphQL endpoint and saving the received tokens. It also retrieves and sets the WooCommerce session token.

```javascript
import { rawRequest } from 'graphql-request';
export async function login(username, password) {
  const headers = {};
  const sessionToken = await getSessionToken();
  if (sessionToken) {
    headers['woocommerce-session'] = `Session ${sessionToken}`;
  }
  try {
    const graphQLClient = new GraphQLClient(process.env.SHOP_GRAPHQL_ENDPOINT, { headers });
    const { data, headers: responseHeaders, status, } = await rawRequest<SsoLoginMutation>(
      process.env.GRAPHQL_ENDPOINT as string,
      LoginDocument,
      { username, password },
      headers,
    );
    const loginResults = data?.login;
    const newSessionToken = responseHeaders.get('woocommerce-session');
    const {
      authToken,
      refreshToken,
      customer,
    } = loginResults;

    if (!authToken || !refreshToken || !newSessionToken) {
      throw new Error( 'Failed to retrieve credentials.');
    }


  } catch (error) {
    throw new Error(error);
  }

  saveCredentials(authToken, newSessionToken, refreshToken);

  return customer;
}
```

--------------------------------

### GraphQL Query for Retrieving Product Data

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

A placeholder for a GraphQL query to fetch product data. This would typically be used with the defined product fragments.

```graphql
export const GetProduct = gql`

```

--------------------------------

### Test Item Count Field with WPGraphQL

Source: https://woographql.com/docs/local-testing

This snippet demonstrates a complete WPUnit test case for the 'itemCount' field in the GraphQL cart query. It sets up a cart with multiple products, defines the GraphQL query, executes it using `$this->graphql()`, and asserts the correctness of the 'itemCount' against the sum of product quantities.

```PHP
<?php

use Tests\WPGraphQL\WooCommerce\TestCase\WooGraphQLTestCase;

class ItemCountTest extends WooGraphQLTestCase {

    // tests
    public function testItemCountField() {
        // Our scenario
        $products = [
            [
                'product_id' => $this->factory->product->createSimple(),
                'quantity'   => 1,
            ],
            [
                'product_id' => $this->factory->product->createSimple(),
                'quantity'   => 1,
            ],
            [
                'product_id' => $this->factory->product->createSimple(),
                'quantity'   => 2,
            ],
            [
                'product_id' => $this->factory->product->createSimple(),
                'quantity'   => 3,
            ],
        ];

        $this->factory->cart->add( ...$products );

        $query = '
            query {
                cart {
                    contents {
                        nodes {
                            quantity
                        }
                    }
                    itemCount
                }
            }
        ';

        $response = $this->graphql( [ 'query' => $query ] );
        $expected = [
            $this->expectedField(
                'cart.itemCount',
                array_sum( array_column( $products, 'quantity' ) )
            ),
        ];
        $this->assertQuerySuccessful( $response, $expected );
    }
}
```

--------------------------------

### ShopPage Component with `useQuery`

Source: https://woographql.com/docs/routing-by-uri

React component that uses Apollo Client's `useQuery` hook to fetch shop data via the `nodeByUri` query. It handles loading and error states and passes product data to `ProductListing`.

```javascript
import React from 'react';
import { useQuery } from '@apollo/client';
import ProductListing from './ProductListing';

// Import the NodeByUri query here
import { NodeByUri } from './graphql';

const ShopPage = () => {
  const { loading, error, data } = useQuery(NodeByUri, {
    variables: { uri: '/shop' },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const products = data?.nodeByUri?.contentNodes?.edges?.map(
    ({ node }) => node
  ) || [];
  return <ProductListing products={products} />;
};

export default ShopPage;
```

--------------------------------

### Copy Codeception Configuration

Source: https://woographql.com/docs/local-testing

Copies the default Codeception configuration file to a new file for local modifications. This allows for customization of Codeception settings for your project.

```bash
cp codeception.dist.yml codeception.yml
```

--------------------------------

### Query Subscription Product Details

Source: https://woographql.com/docs/using-subscription-data-and-mutations

Use this GraphQL query to fetch specific details of a SubscriptionProduct, including its ID, name, price, and subscription-specific fields like period, interval, length, and sign-up fee. Ensure the product ID is provided as a variable.

```graphql
const SUBSCRIPTION_PRODUCT_QUERY = gql`
  query SubscriptionProduct($id: ID!) {
    product(id: $id) {
      ... on SubscriptionProduct {
        id
        name
        price
        subscriptionPrice
        subscriptionPeriod
        subscriptionPeriodInterval
        subscriptionLength
        subscriptionSignUpee
      }
    }
  }
`;
```

--------------------------------

### Apollo Afterware Callback using .map()

Source: https://woographql.com/docs/configuring-graphql-client-for-user-session

This snippet demonstrates how to use the `.map()` method on the result of `forward()` to execute code after an Apollo operation has completed. This allows for modification of the response object if necessary.

```javascript
return forward(operation).map((response) => {
```

--------------------------------

### Creating Simple Products for Cart Test

Source: https://woographql.com/docs/local-testing

This PHP code defines an array of products, each with a product ID generated by `createSimple()` and a specified quantity, intended for adding to a test cart.

```php
$products = [
    [
        'product_id' => $this->factory->product->createSimple(),
        'quantity'   => 1,
    ],
    [
        'product_id' => $this->factory->product->createSimple(),
        'quantity'   => 1,
    ],
    [
        'product_id' => $this->factory->product->createSimple(),
        'quantity'   => 2,
    ],
    [
        'product_id' => $this->factory->product->createSimple(),
        'quantity'   => 3,
    ],
];
```

--------------------------------

### Render Product Information in SingleProduct Component

Source: https://woographql.com/docs/using-product-data

Renders core product details including name, description, price, and attributes. Uses `dangerouslySetInnerHTML` for the description and conditionally displays a strikethrough for sale prices.

```javascript
// Inside the SingleProduct component, after defining the `product` constant

return (
  <div className="single-product">
    <h1>{product.name}</h1>
    <div dangerouslySetInnerHTML={{ __html: product.description }}></div>
    <p>
      {product.onSale && <del>{product.regularPrice}</del>}
      {product.price}
    </p>

    <div className="attributes">
      {product.attributes.nodes.map((attr) => (
        <div key={attr.id}>
          <strong>{attr.name}:</strong> {attr.options.join(', ')}
        </div>
      ))}
    </div>

    {/* Add the width, height, length, and weight information */}
    {/* Add the cart options section */}
  </div>
);
```

--------------------------------

### Configure Apollo Client for Relay-Style Pagination

Source: https://woographql.com/docs/routing-by-uri

Set up Apollo Client with type policies to enable relay-style pagination. This ensures efficient caching of paginated query results.

```javascript
import { ApolloClient, from } from '@apollo/client';
import { relayStylePagination } from '@apollo/client/utilities';
const typePolicies = {
  RootQuery: {
    queryType: true,
    fields: {
      products: relayStylePagination(['where']),
    },
  },
};
const client = new ApolloClient({
  link: from([
    // ...middleware/afterware/endpoint
  ]),
  cache: new InMemoryCache({ typePolicies }),
});
```

--------------------------------

### GetProduct

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Retrieves detailed information about a specific product using its ID and optionally its ID type.

```APIDOC
## GetProduct

### Description
Retrieves detailed information about a specific product.

### Method
Query

### Endpoint
N/A (GraphQL Operation)

### Parameters
#### Query Parameters
- **id** (ID!) - Required - The ID of the product.
- **idType** (ProductIdTypeEnum) - Optional - The type of the product ID (e.g., SLUG, DATABASE_ID, URl, NAME).

### Response
#### Success Response (200)
- **product** - Object - Contains product details.

```

--------------------------------

### ProductListing Component for Display

Source: https://woographql.com/docs/routing-by-uri

React component to render a list of products. It maps over the `products` array and displays product details like name, description, price, and image. Note: Nullable field checks are omitted for brevity.

```javascript
import React from 'react';

const ProductListing = ({ products }) => {
  return (
    <div>
      <h2>Shop</h2>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <h3>{product.name}</h3>
            <p>{product.shortDescription}</p>
            <p>Price: {product.price}</p>
            <img src={product.image.sourceUrl} alt={product.image.altText} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductListing;
```

--------------------------------

### Generate Checkout URL with WooGraphQL

Source: https://woographql.com/docs/harmonizing-with-wordpress

Use this function to generate a checkout URL by passing a session token, client session ID, and the action ('checkout'). Note that for specific actions like 'change-sub' and 'renew-sub', a '%SUBSCRIPTION_ID%' placeholder needs to be replaced with the actual subscription ID.

```javascript
const checkoutUrl = generateUrl(sessionToken, clientSessionId, 'checkout');
```

--------------------------------

### Using the `checkout` Mutation

Source: https://woographql.com/docs/using-checkout-mutation-and-order-mutations

The `checkout` mutation allows processing checkout for a user with an existing payment method. It requires the `paymentMethod` ID in its input.

```APIDOC
## Using the `checkout` Mutation

### Description
The `checkout` mutation allows us to process the checkout for a user with an existing payment method. This mutation takes the `input` argument which should contain the `paymentMethod` field. The `paymentMethod` field should be the ID of the payment method the customer wishes to use.

### Request Example
```graphql
mutation {
  checkout(input: { paymentMethod: "stripe" }) {
    clientMutationId
    order {
      id
      orderId
      total
    }
  }
}
```
```

--------------------------------

### Extend WooGraphQLTestCase for WPGraphQL Testing

Source: https://woographql.com/docs/local-testing

Extend the `WooGraphQLTestCase` class provided by the WPGraphQL for WooCommerce test environment. This class is specifically designed for testing WPGraphQL responses and integrates with the WPGraphQLTestCase library.

```php
<?php

use Tests\WPGraphQL\WooCommerce\TestCase\WooGraphQLTestCase;

class ItemCountTest extends WooGraphQLTestCase {

    // tests
    public function testMe()
    {
    }
}

```

--------------------------------

### Product Content Fragments

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Fragments for retrieving basic and full product details, including simple and variable product specific fields.

```APIDOC
## ProductContentSlice

### Description
Fragment for basic product information.

### GraphQL Fragment
```graphql
fragment ProductContentSlice on Product {
  id
  databaseId
  name
  slug
  type
  image {
    id
    sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
    altText
  }
  ... on SimpleProduct {
    price
    regularPrice
    soldIndividually
  }
  ... on VariableProduct {
    price
    regularPrice
    soldIndividually
  }
}
```

## ProductVariationContentSlice

### Description
Fragment for basic product variation information.

### GraphQL Fragment
```graphql
fragment ProductVariationContentSlice on ProductVariation {
  id
  databaseId
  name
  slug
  image {
    id
    sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
    altText
  }
  price
  regularPrice
}
```

## ProductContentFull

### Description
Fragment for comprehensive product details, including gallery, attributes, stock status, and variation data.

### GraphQL Fragment
```graphql
fragment ProductContentFull on Product {
  id
  databaseId
  slug
  name
  type
  description
  shortDescription(format: RAW)
  image {
    id
    sourceUrl
    altText
  }
  galleryImages {
    nodes {
      id
      sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
      altText
    }
  }
  productTags(first: 20) {
    nodes {
      id
      slug
      name
    }
  }
  attributes {
    nodes {
      id
      attributeId
      ... on LocalProductAttribute {
        name
        options
        variation
      }
      ... on GlobalProductAttribute {
        name
        options
        variation
      }
    }
  }
  ... on SimpleProduct {
    onSale
    stockStatus
    price
    rawPrice: price(format: RAW)
    regularPrice
    salePrice
    stockStatus
    stockQuantity
    soldIndividually
  }
  ... on VariableProduct {
    onSale
    price
    rawPrice: price(format: RAW)
    regularPrice
    salePrice
    stockStatus
    stockQuantity
    soldIndividually
    variations(first: 50) {
      nodes {
        id
        databaseId
        name
        price
        rawPrice: price(format: RAW)
        regularPrice
        salePrice
        onSale
        attributes {
          nodes {
            name
            label
            value
          }
        }
      }
    }
  }
}
```
```

--------------------------------

### Using the `createOrder` Mutation

Source: https://woographql.com/docs/using-checkout-mutation-and-order-mutations

The `createOrder` mutation creates an order on the backend without relying on WooCommerce's session management. It requires `paymentMethod` and `lineItems` in its input.

```APIDOC
## Using the `createOrder` Mutation

### Description
The `createOrder` mutation allows us to create an order on the backend without relying on WooCommerce's session management. This mutation takes the `input` argument which should contain the `paymentMethod` field and the `lineItems` field. The `lineItems` field should be an array of `LineItemInput` objects, each representing a product in the cart.

### Request Example
```graphql
mutation {
  createOrder(input: {
    paymentMethod: "stripe",
    lineItems: [
      {
        productId: 1,
        quantity: 2
      },
      {
        productId: 3,
        quantity: 1
      }
    ]
  }) {
    clientMutationId
    order {
      id
      orderId
      total
    }
  }
}
```
```

--------------------------------

### GraphQL Queries for Product and Cart Data

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Defines GraphQL queries for fetching product details and cart information. Includes fragments for reusable content.

```javascript
export const GetProduct = gql`
  query GetProduct($id: ID!, $idType: ProductIdTypeEnum) {
    product(id: $id, idType: $idType) {
      ...ProductContentFull
    }
  }
  ${ProductContentFull}
`;

export const GetProductVariation = gql`
  query GetProductVariation($id: ID!) {
    productVariation(id: $id, idType: DATABASE_ID) {
      ...VariationContent
    }
  }
  ${VariationContent}
`;

export const GetCart = gql`
  query GetCart($customerId: Int) {
    cart {
      ...CartContent
    }
    customer(customerId: $customerId) {
      ...CustomerContent
    }
  }
  ${CartContent}
  ${CustomerContent}
`;
```

--------------------------------

### Define `createSessionLink` Function

Source: https://woographql.com/docs/configuring-graphql-client-for-user-session

Create a session link using `setContext` to dynamically add the 'woocommerce-session' header with the retrieved session token to outgoing GraphQL requests. Returns an empty object if no session token is found.

```javascript
import { setContext } from '@apollo/client/link/context';

function createSessionLink() {
  return setContext(async (operation) => {
    const headers = {};
    const sessionToken = await getSessionToken();

    if (sessionToken) {
      headers['woocommerce-session'] = `Session ${sessionToken}`;

      return { headers };
    }

    return {};
  });
}
```

--------------------------------

### Implement Pagination in React Shop Page Component

Source: https://woographql.com/docs/routing-by-uri

Update your React component to use the `useQuery` hook for fetching data and implement a `loadMoreProducts` function to handle fetching additional data using `fetchMore`.

```javascript
import React from 'react';
import { useQuery } from '@apollo/client';
import ProductListing from './ProductListing';

// Import the NodeByUri query here
import { NodeByUri } from './graphql';

const ShopPage = () => {
  const { loading, error, data, fetchMore } = useQuery(NodeByUri, {
    variables: { uri: '/shop', first: 10 },
  });

  const loadMoreProducts = () => {
    if (data.nodeByUri.contentNodes.pageInfo.hasNextPage) {
      fetchMore({
        variables: {
          after: data.nodeByUri.contentNodes.pageInfo.endCursor,
        },
      });
    }
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const products = data?.nodeByUri?.contentNodes?.edges?.map(
    ({ node }) => node
  ) || [];

  return (
    <>
      <ProductListing products={products} />
      <button onClick={loadMoreProducts}>Load More</button>
    </>
  );
};

export default ShopPage;
```

--------------------------------

### GraphQL Fragment for Order Details

Source: https://woographql.com/docs/handling-user-session-and-using-cart-mutations

Defines a fragment to fetch comprehensive order information, including status, totals, dates, billing/shipping addresses, and line items. Use for displaying order history or details.

```graphql
export const OrderFields = gql`
  fragment OrderFields on Order {
    id
    databaseId
    orderNumber
    orderVersion
    status
    needsProcessing
    subtotal
    paymentMethodTitle
    total
    totalTax
    date
    dateCompleted
    datePaid
    billing {
      ...AddressFields
    }
    shipping {
      ...AddressFields
    }
    lineItems(first: 100) {
      nodes {
          ...LineItemFields
      }
    }
  }
  ${AddressFields}
  ${LineItemFields}
`;
```

--------------------------------

### Render CompositeProduct Component Based on Type

Source: https://woographql.com/docs/using-composite-product-data-and-mutations

Conditionally render a `CompositeProduct` component if the product's `__typename` is 'CompositeProduct'. Otherwise, render the rest of the `SingleProduct` component.

```javascript
import { CompositeProduct } from './CompositeProduct';
import { Product as ProductType } from '@axis/graphql';

export const SingleProduct = ({ product }) => {
  if (product.__typename === 'CompositeProduct') {
    return <CompositeProduct product={product} />;
  }

  // ...rest of the component
};

```

--------------------------------

### Login Page Component with Login Mutation

Source: https://woographql.com/docs/using-customer-data-and-mutations

This component handles user login using a form and the `login` mutation from the `SessionProvider`. It redirects the user upon successful authentication or displays an error message.

```javascript
import React, { useState, useEffect } from 'react';
import { useSession } from './SessionProvider';

function LoginPage() {
  const [username, setUserName] = useState('');
  const [password, setPassword] = useState('');
  const { login, customer } = useSession();

  const handleLogin = (event) => {
    event.preventDefault();
    login(username, password);
  }
  
  useEffect(() => {
    if (customer?.id && customer.id !== 'guest') {
      // Redirect to account page.
      window.location.href = `${process.env.APP_URL}/account`;
    }
  }, [customer])

  return (
    <form onSubmit={handleLogin}>
      <input
        type="text"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter Username or Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Enter Password"
        required
      />
      <button type="submit" disabled={loading}>
        Log In
      </button>
      {error && <p>Error: {error.message}</p>}
    </form>
  );
}

export default LoginPage;
```

--------------------------------

### Import Cart Hooks and Components

Source: https://woographql.com/docs/using-cart-data

Imports necessary hooks and components for cart functionality. Ensure SessionProvider, useCartMutations, useOtherCartMutations, ShippingInfo, and ApplyCouponForm are available.

```javascript
import React, { useState } from 'react';
import { useSession } from './SessionProvider';
import { useCartMutations, useOtherCartMutations } from './useCartMutations';
import { ShippingInfo } from './ShippingInfo';
import { ApplyCouponForm } from './ApplyCouponForm';
```

--------------------------------

### Fetch and Set New Auth Token

Source: https://woographql.com/docs/handling-user-authentication

Fetches a new auth token using the refresh token and sets up an interval to refresh it periodically. Handles cases where no refresh token is found or errors occur during fetching.

```javascript
let tokenSetter;
async function fetchAuthToken() {
  const refreshToken = localStorage.getItem(process.env.REFRESH_TOKEN_LS_KEY);
  if (!refreshToken) {
    // No refresh token means the user is not authenticated.
    return;
  }

  try {
    const graphQLClient = new GraphQLClient(process.env.GRAPHQL_ENDPOINT);

    const results = await graphQLClient.request(RefreshAuthTokenDocument, { refreshToken });

    const authToken = results?.refreshJwtAuthToken?.authToken;
    if (!authToken) {
      throw new Error('Failed to retrieve a new auth token');
    }
  } catch (err) {
    console.error(err);
  }

  // Save token.
  sessionStorage.setItem(process.env.AUTH_TOKEN_SS_KEY, authToken);
  if (tokenSetter) {
    clearInterval(tokenSetter);
  }
  tokenSetter = setInterval(
    async () => {
      if (!hasCredentials()) {
        clearInterval(tokenSetter);
        return;
      }
      fetchAuthToken();
    },
    Number(process.env.AUTH_KEY_TIMEOUT || 30000),
  );

  return authToken;
}
```
Tokens:
Raw