# createWithCache

Creates a utility function that executes an asynchronous operation 
 like `fetch` and caches the result according to the strategy provided.
Use this to call any third-party APIs from loaders or actions.
By default, it uses the `CacheShort` strategy.

```js
// In your app's `server.ts` file:
import * as remixBuild from '@remix-run/dev/server-build';
import {createWithCache_unstable, CacheLong} from '@shopify/hydrogen';
// Use another `createRequestHandler` if deploying off oxygen
import {createRequestHandler} from '@shopify/remix-oxygen';

export default {
  async fetch(request, env, executionContext) {
    const cache = await caches.open('my-cms');
    const withCache = createWithCache_unstable({
      cache,
      waitUntil: executionContext.waitUntil,
    });

    // Create a custom utility to query a third-party API:
    const fetchMyCMS = (query) => {
      // Prefix the cache key and make it unique based on arguments.
      return withCache(['my-cms', query], CacheLong(), async () => {
        return await (
          await fetch('my-cms.com/api', {
            method: 'POST',
            body: query,
          })
        ).json();
      });
    };

    const handleRequest = createRequestHandler({
      build: remixBuild,
      mode: process.env.NODE_ENV,
      getLoadContext: () => ({
        /* ... */
        fetchMyCMS,
      }),
    });

    return handleRequest(request);
  },
};

```

```ts
// In your app's `server.ts` file:
import * as remixBuild from '@remix-run/dev/server-build';
import {createWithCache_unstable, CacheLong} from '@shopify/hydrogen';
// Use another `createRequestHandler` if deploying off oxygen
import {createRequestHandler} from '@shopify/remix-oxygen';

export default {
  async fetch(
    request: Request,
    env: Record<string, string>,
    executionContext: ExecutionContext,
  ) {
    const cache = await caches.open('my-cms');
    const withCache = createWithCache_unstable({
      cache,
      waitUntil: executionContext.waitUntil,
    });

    // Create a custom utility to query a third-party API:
    const fetchMyCMS = (query: string) => {
      // Prefix the cache key and make it unique based on arguments.
      return withCache(['my-cms', query], CacheLong(), async () => {
        return await (
          await fetch('my-cms.com/api', {
            method: 'POST',
            body: query,
          })
        ).json();
      });
    };

    const handleRequest = createRequestHandler({
      build: remixBuild,
      mode: process.env.NODE_ENV,
      getLoadContext: () => ({
        // Make sure to update remix.env.d.ts to include `fetchMyCMS`
        fetchMyCMS,
      }),
    });

    return handleRequest(request);
  },
};

```

## Arguments

### CreateWithCache_unstableGeneratedType

Creates a utility function that executes an asynchronous operation
like `fetch` and caches the result according to the strategy provided.
Use this to call any third-party APIs from loaders or actions.
By default, it uses the `CacheShort` strategy.

#### Returns: CreateWithCacheReturn<T = unknown>

#### Params:

- options: CreateWithCacheOptions
export function createWithCache_unstable<T = unknown>(
  options: CreateWithCacheOptions,
): CreateWithCacheReturn<T> {
  const {cache, waitUntil} = options;
  return function withCache<T = unknown>(
    cacheKey: CacheKey,
    strategy: CachingStrategy,
    actionFn: () => T | Promise<T>,
  ) {
    return runWithCache<T>(cacheKey, actionFn, {
      strategy,
      cacheInstance: cache,
      waitUntil,
    });
  };
}


### CreateWithCacheOptions

### cache

value: `Cache`

An instance that implements the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)

### waitUntil

value: `ExecutionContext`

The `waitUntil` function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform.

### CachingStrategy

Use the `CachingStrategy` to define a custom caching mechanism for your data. Or use one of the pre-defined caching strategies: CacheNone, CacheShort, CacheLong.

### mode

value: `string`

The caching mode, generally `public`, `private`, or `no-store`.

### maxAge

value: `number`

The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).

### staleWhileRevalidate

value: `number`

Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).

### sMaxAge

value: `number`

Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).

### staleIfError

value: `number`

Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).