Connect to the API

import { useState, useEffect } from 'react';// If using bearer-token based session management, we'll store the token// in localStorage using this key.const AUTH_TOKEN_KEY = 'auth_token';const API_URL = 'https://readonlydemo.vendure.io/shop-api';let languageCode: string | undefined;let channelToken: string | undefined;export function setLanguageCode(value: string | undefined) {    languageCode = value;}export function setChannelToken(value: string | undefined) {    channelToken = value;}export function query(document: string, variables: Record<string, any> = {}) {    const authToken = localStorage.getItem(AUTH_TOKEN_KEY);    const headers = new Headers({        'content-type': 'application/json',    });    if (authToken) {        headers.append('authorization', `Bearer ${authToken}`);    }    if (channelToken) {        headers.append('vendure-token', channelToken);    }    let endpoint = API_URL;    if (languageCode) {        endpoint += `?languageCode=${languageCode}`;    }    return fetch(endpoint, { // [!code highlight]        method: 'POST', // [!code highlight]        headers, // [!code highlight]        credentials: 'include', // [!code highlight]        body: JSON.stringify({ // [!code highlight]            query: document, // [!code highlight]            variables, // [!code highlight]        }), // [!code highlight]    }).then((res) => {        if (!res.ok) {            throw new Error(`An error ocurred, HTTP status: ${res.status}`);        }        const newAuthToken = res.headers.get('vendure-auth-token');        if (newAuthToken) {            localStorage.setItem(AUTH_TOKEN_KEY, newAuthToken);        }        return res.json();    });}/** * Here we have wrapped the `query` function into a React hook for convenient use in * React components. */ export function useQuery(    document: string,    variables: Record<string, any> = {}) {    const [data, setData] = useState(null);    const [loading, setLoading] = useState(true);    const [error, setError] = useState(null);    useEffect(() => {        query(document, variables)            .then((result) => {                setData(result.data);                setError(null);            })            .catch((err) => {                setError(err.message);                setData(null);            })            .finally(() => {                setLoading(false);            });    }, []);    return { data, loading, error };}

import {    ApolloClient,    ApolloLink,    HttpLink,    InMemoryCache,} from '@apollo/client';import { setContext } from '@apollo/client/link/context';const API_URL = `https://demo.vendure.io/shop-api`;// If using bearer-token based session management, we'll store the token// in localStorage using this key.const AUTH_TOKEN_KEY = 'auth_token';let channelToken: string | undefined;let languageCode: string | undefined;const httpLink = new HttpLink({    uri: () => {        if (languageCode) {            return `${API_URL}?languageCode=${languageCode}`;        } else {            return API_URL;        }    },    // This is required if using cookie-based session management,    // so that any cookies get sent with the request.    credentials: 'include',});// This part is used to check for and store the session token// if it is returned by the server.const afterwareLink = new ApolloLink((operation, forward) => {    return forward(operation).map((response) => {        const context = operation.getContext();        const authHeader = context.response.headers.get('vendure-auth-token');        if (authHeader) {            // If the auth token has been returned by the Vendure            // server, we store it in localStorage            localStorage.setItem(AUTH_TOKEN_KEY, authHeader);        }        return response;    });});/** * Used to specify a channel token for projects that use * multiple Channels. */export function setChannelToken(value: string | undefined) {    channelToken = value;}/** * Used to specify a language for any localized results. */export function setLanguageCode(value: string | undefined) {    languageCode = value;}export const client = new ApolloClient({    link: ApolloLink.from([        // If we have stored the authToken from a previous        // response, we attach it to all subsequent requests.        setContext((request, operation) => {            const authToken = localStorage.getItem(AUTH_TOKEN_KEY);            let headers: Record<string, any> = {};            if (authToken) {                headers.authorization = `Bearer ${authToken}`;            }            if (channelToken) {                headers['vendure-token'] = channelToken;            }            return { headers };        }),        afterwareLink,        httpLink,    ]),    cache: new InMemoryCache(),});

import type { TypedDocumentNode } from '@graphql-typed-document-node/core';import {    GraphQLClient,    RequestDocument,    RequestMiddleware,    ResponseMiddleware,    Variables,} from 'graphql-request';// If using bearer-token based session management, we'll store the token// in localStorage using this key.const AUTH_TOKEN_KEY = 'auth_token';const API_URL = 'http://localhost:3000/shop-api';// If we have a session token, add it to the outgoing requestconst requestMiddleware: RequestMiddleware = async (request) => {    const authToken = localStorage.getItem(AUTH_TOKEN_KEY);    return {        ...request,        headers: {            ...request.headers,            ...(authToken ? { authorization: `Bearer ${authToken}` } : {}),        },    };};// Check all responses for a new session tokenconst responseMiddleware: ResponseMiddleware = (response) => {    if (!(response instanceof Error) && !response.errors) {        const authHeader = response.headers.get('vendure-auth-token');        if (authHeader) {            // If the session token has been returned by the Vendure            // server, we store it in localStorage            localStorage.setItem(AUTH_TOKEN_KEY, authHeader);        }    }};const client = new GraphQLClient(API_URL, {    // Required for cookie-based sessions    credentials: 'include',    requestMiddleware,    responseMiddleware,});/** * Sets the languageCode to be used for all subsequent requests. */export function setLanguageCode(languageCode: string | undefined) {    if (!languageCode) {        client.setEndpoint(API_URL);    } else {        client.setEndpoint(`${API_URL}?languageCode=${languageCode}`);    }}/** * Sets the channel token to be used for all subsequent requests. */export function setChannelToken(channelToken: string | undefined) {    if (!channelToken) {        client.setHeader('vendure-token', undefined);    } else {        client.setHeader('vendure-token', channelToken);    }}/** * Makes a GraphQL request using the `graphql-request` client. */export function request<T, V extends Variables = Variables>(    document: RequestDocument | TypedDocumentNode<T, V>,    variables: Record<string, any> = {}) {    return client.request(document, variables);}