Using GraphQL API with Injected JavaScript

This guide explains how to make requests to the Sana GraphQL API by injecting JavaScript into the webstore. In this example, we will demonstrate how to retrieve the CustomerId by sending a GraphQL query to the API endpoint.

Warning

This is not the recommended approach

Using injected JavaScript to call the Sana GraphQL API is not recommended for any development. This approach is unstable, and difficult to maintain. Use this approach only as a last resort when recommended patterns are not a viable option.

Recommended Best Practices

For stable and secure development, please use the officially supported Sana ADK patterns:

Webstore UI:: Use the useApi() hook to access api.graphApi
api.graphApi: Use Epics to call api.graphApi.

Note

For backward compatibility and to avoid breaking changes, it is recommended to use the stable GraphQL API provided by Sana whenever possible.

Code Example

Below is the code responsible for making a request to the GraphQL API to fetch the CustomerId and handle the response.

const graphApiUrl = `${url.protocol}//${url.host}/api/graph`;

const graphqlQuery = {
    query: `
        query {
            viewer {
                customer {
                    id
                }
            }
        }
    `
};

const response = await fetch(graphApiUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'x-useauthcookie': 'true'
    },
    body: JSON.stringify(graphqlQuery)
});

const data = await response.json();
const customerId =  data?.data?.viewer?.customer?.id || "";

Explanation

GraphQL API URL: The API endpoint is dynamically constructed using the protocol and host from the current webstore URL. This ensures the request is sent to the correct domain.
```
const graphApiUrl = `${url.protocol}//${url.host}/api/graph/stable`;
```

GraphQL Query: The query is designed to retrieve the CustomerId under the viewer and customer fields.

const graphqlQuery = {
    query: `
        query {
            viewer {
                customer {
                    id
                }
            }
        }
    `
};

Fetch Request: A POST request is sent to the graphApiUrl. The query is passed as the body of the request in JSON format. Relevant headers, including Content-Type: application/json, are set to ensure the server can interpret the request correctly.
```
const response = await fetch(graphApiUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'x-useauthcookie': 'true'
    },
    body: JSON.stringify(graphqlQuery)
});
```

Authentication

'x-useauthcookie': 'true'

Including the 'x-useauthcookie' header in the injected JavaScript enables requests to the webstore’s API to automatically include relevant cookies, such as session or authentication tokens. Because the requests are sent to the same origin (the same domain as the webstore), manual cookie management is unnecessary. This automatic cookie handling allows the JavaScript to seamlessly access authenticated resources, leveraging the user’s active session without requiring additional setup.