> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: httpClient

## Article: httpClient

## Article Link: https://dev.wix.com/docs/sdk/core-modules/essentials/http-client.md

## Article Content:

# httpClient

The `httpClient` submodule includes helper methods for making HTTP requests within the Wix platform.

## Import statement
```js
import { httpClient } from '@wix/essentials';
```

## Methods

### `fetchWithAuth()`

Makes HTTP requests to [Wix REST APIs](https://dev.wix.com/docs/rest.md) and endpoints that require a Wix access token, such as endpoints hosted by a Wix app backend. The Wix development framework generates the access token. The token reflects the [identity](https://dev.wix.com/docs/sdk/articles/getting-started/about-identities.md) of the current site user and is automatically included in requests from this method as an `Authorization` header.

> **Notes:** 
> - This method is only intended for use with Wix-hosted apps. 
>   - If you are building a [self-hosted app](https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps.md) or [Headless project](https://dev.wix.com/docs/sdk/articles/get-started/about-headless-projects.md), which require a [Wix Client](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md), call the Wix Client's [`fetchWithAuth()`](https://dev.wix.com/docs/sdk/core-modules/sdk/wix-client.md) method instead.
>   - Instead of calling a backend endpoint in a Wix-hosted app using this method, you can use a [web method](https://dev.wix.com/docs/sdk/core-modules/web-methods/introduction.md). Web methods handle authentication for you.

#### Method Declaration
```js
fetchWithAuth(url: string, options: object): Promise<Response>
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `url` | string | URL of the REST API to call. |
| `options` | object | Standard fetch request options. |

#### Returns
Standard `fetch()` [response](https://developer.mozilla.org/en-US/docs/Web/API/Response).

#### Example
Call the [List Published Site Urls](https://dev.wix.com/docs/rest/business-management/site-urls/published-site-urls/list-published-site-urls.md) endpoint:

```js
import { httpClient } from '@wix/essentials';

//...

const response = await httpClient.fetchWithAuth(
  "https://www.wixapis.com/urls-server/v2/published-site-urls",
  {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    }
  },
);
```

### `graphql()`

Calls Wix APIs through the [Wix GraphQL API](https://dev.wix.com/docs/graphql.md).

Supports queries and mutation.

<blockquote class="important">
  <strong>Important:</strong>

  The Wix GraphQL API is in Alpha and is subject to change.
</blockquote>

#### Method Declaration

```js
graphql<Result, Variables>(
      query:
        | string
        | TypedQueryInput<Result, Variables>,
      variables?: Variables,
    ): Promise<{
      data: Result;
      errors?: GraphQLFormattedError[];
    }>
```

#### Parameters

| Name      | Type   | Description                                                      |
| :-------- | :----- | :--------------------------------------------------------------- |
| `query` | TypedQueryInput<Result, Variables> | [Wix GraphQL](https://dev.wix.com/docs/graphql.md) query to execute. |
| `variables` | object | Variables to use in the query. Optional. |

#### Returns

| Name      | Type   | Description                                                      |
| :-------- | :----- | :--------------------------------------------------------------- |
| `data` | object | Result of the query. The format of the data depends on the query. |
| `errors` | object | GraphQL query errors. This property is not returned if there are no errors. |

#### Example
Query products using graphQL:

```js
import { httpClient } from "@wix/essentials";

// Define a query with variables
const productsQuery = `
  query Products($filter: JSON!) {
    storesProductsV1Products(queryInput: { query: { filter: $filter }}) {
      items {
        name
      }
    }
  }
`;

// Provide a search term
const search = 'Shirt'

// Provide values for the query variables and run the query
const { data } = await httpClient.graphql(productsQuery, {
  filter: {
    name: {
      $startsWith: search || ''
    }
  },
});
```