Połączenie z API

import { useState, useEffect } from 'react';

// Jeśli używamy zarządzania sesjami opartego na tokenach bearer,
// przechowujemy token w localStorage pod tym kluczem.
const AUTH_TOKEN_KEY = 'auth_token';

const API_URL = 'https://readonlydemo.deenruv.com/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('deenruv-token', channelToken);
    }
    let endpoint = API_URL;
    if (languageCode) {
        endpoint += `?languageCode=${languageCode}`;
    }
    return fetch(endpoint, {
        method: 'POST',
        headers,
        credentials: 'include',
        body: JSON.stringify({
            query: document,
            variables,
        }),
    }).then(res => {
        if (!res.ok) {
            throw new Error(`An error ocurred, HTTP status: ${res.status}`);
        }
        const newAuthToken = res.headers.get('deenruv-auth-token');
        if (newAuthToken) {
            localStorage.setItem(AUTH_TOKEN_KEY, newAuthToken);
        }
        return res.json();
    });
}

/**
 * Tutaj opakowaliśmy funkcję `query` w hook React dla wygodnego
 * użycia w komponentach React.
 */
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 { useQuery } from './client';
import './style.css';

const GET_PRODUCTS = /*GraphQL*/ `
    query GetProducts($options: ProductListOptions) {
        products(options: $options) {
            items {
                id
                name
                slug
                featuredAsset {
                    preview
                }
            }
        }
    }
`;

export default function App() {
    const { data, loading, error } = useQuery(GET_PRODUCTS, {
        options: { take: 3 },
    });

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

    return data.products.items.map(({ id, name, slug, featuredAsset }) => (
        <div key={id}>
            <h3>{name}</h3>
            <img src={`${featuredAsset.preview}?preset=small`} alt={name} />
        </div>
    ));
}

 import * as React from 'react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';

 import App from './App';

 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);

 root.render(
     <StrictMode>
         <App />
     </StrictMode>
 );

import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const API_URL = `https://demo.deenruv.com/shop-api`;

// Jeśli używamy zarządzania sesjami opartego na tokenach bearer,
// przechowujemy token w localStorage pod tym kluczem.
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;
        }
    },
    // Jest to wymagane przy korzystaniu z zarządzania sesjami opartego na ciasteczkach,
    // aby ciasteczka były wysyłane z każdym żądaniem.
    credentials: 'include',
});

// Ta część jest używana do sprawdzania i przechowywania tokenu sesji,
// jeśli jest zwracany przez serwer.
const afterwareLink = new ApolloLink((operation, forward) => {
    return forward(operation).map(response => {
        const context = operation.getContext();
        const authHeader = context.response.headers.get('deenruv-auth-token');
        if (authHeader) {
            // Jeśli token auth został zwrócony przez serwer Deenruv,
            // przechowujemy go w localStorage
            localStorage.setItem(AUTH_TOKEN_KEY, authHeader);
        }
        return response;
    });
});

/**
 * Używane do określenia tokenu kanału dla projektów, które korzystają
 * z wielu kanałów.
 */
export function setChannelToken(value: string | undefined) {
    channelToken = value;
}

/**
 * Używane do określenia języka dla zlokalizowanych wyników.
 */
export function setLanguageCode(value: string | undefined) {
    languageCode = value;
}

export const client = new ApolloClient({
    link: ApolloLink.from([
        // Jeśli przechowaliśmy authToken z poprzedniej
        // odpowiedzi, dołączamy go do wszystkich kolejnych żądań.
        setContext((request, operation) => {
            const authToken = localStorage.getItem(AUTH_TOKEN_KEY);
            let headers: Record<string, any> = {};
            if (authToken) {
                headers.authorization = `Bearer ${authToken}`;
            }
            if (channelToken) {
                headers['deenruv-token'] = channelToken;
            }
            return { headers };
        }),
        afterwareLink,
        httpLink,
    ]),
    cache: new InMemoryCache(),
});

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloProvider } from '@apollo/client';
import App from './App';
import { client } from './client';

// Obsługiwane w React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
);

import { useQuery, gql } from '@apollo/client';

const GET_PRODUCTS = gql`
    query GetProducts($options: ProductListOptions) {
        products(options: $options) {
            items {
                id
                name
                slug
                featuredAsset {
                    preview
                }
            }
        }
    }
`;

export default function App() {
    const { loading, error, data } = useQuery(GET_PRODUCTS, {
        variables: { options: { take: 3 } },
    });

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

    return data.products.items.map(({ id, name, slug, featuredAsset }) => (
        <div key={id}>
            <h3>{name}</h3>
            <img src={`${featuredAsset.preview}?preset=small`} alt={name} />
        </div>
    ));
}

import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
import {
    GraphQLClient,
    RequestDocument,
    RequestMiddleware,
    ResponseMiddleware,
    Variables,
} from 'graphql-request';

// Jeśli używamy zarządzania sesjami opartego na tokenach bearer,
// przechowujemy token w localStorage pod tym kluczem.
const AUTH_TOKEN_KEY = 'auth_token';

const API_URL = 'http://localhost:6100/shop-api';

// Jeśli mamy token sesji, dodajemy go do wychodzącego żądania
const requestMiddleware: RequestMiddleware = async request => {
    const authToken = localStorage.getItem(AUTH_TOKEN_KEY);
    return {
        ...request,
        headers: {
            ...request.headers,
            ...(authToken ? { authorization: `Bearer ${authToken}` } : {}),
        },
    };
};

// Sprawdzamy wszystkie odpowiedzi pod kątem nowego tokenu sesji
const responseMiddleware: ResponseMiddleware = response => {
    if (!(response instanceof Error) && !response.errors) {
        const authHeader = response.headers.get('deenruv-auth-token');
        if (authHeader) {
            // Jeśli token sesji został zwrócony przez serwer Deenruv,
            // przechowujemy go w localStorage
            localStorage.setItem(AUTH_TOKEN_KEY, authHeader);
        }
    }
};

const client = new GraphQLClient(API_URL, {
    // Wymagane dla sesji opartych na ciasteczkach
    credentials: 'include',
    requestMiddleware,
    responseMiddleware,
});

/**
 * Ustawia languageCode, który będzie używany we wszystkich kolejnych żądaniach.
 */
export function setLanguageCode(languageCode: string | undefined) {
    if (!languageCode) {
        client.setEndpoint(API_URL);
    } else {
        client.setEndpoint(`${API_URL}?languageCode=${languageCode}`);
    }
}

/**
 * Ustawia token kanału, który będzie używany we wszystkich kolejnych żądaniach.
 */
export function setChannelToken(channelToken: string | undefined) {
    if (!channelToken) {
        client.setHeader('deenruv-token', undefined);
    } else {
        client.setHeader('deenruv-token', channelToken);
    }
}

/**
 * Wykonuje żądanie GraphQL za pomocą klienta `graphql-request`.
 */
export function request<T, V extends Variables = Variables>(
    document: RequestDocument | TypedDocumentNode<T, V>,
    variables: Record<string, any> = {},
) {
    return client.request(document, variables);
}

import * as React from 'react';
import { gql } from 'graphql-request';
import { useQuery } from '@tanstack/react-query';
import { request } from './client';

const GET_PRODUCTS = gql`
    query GetProducts($options: ProductListOptions) {
        products(options: $options) {
            items {
                id
                name
                slug
                featuredAsset {
                    preview
                }
            }
        }
    }
`;

export default function App() {
    const { isLoading, data } = useQuery({
        queryKey: ['products'],
        queryFn: async () =>
            request(GET_PRODUCTS, {
                options: { take: 3 },
            }),
    });

    if (isLoading) return <p>Loading...</p>;

    return data ? (
        data.products.items.map(({ id, name, slug, featuredAsset }) => (
            <div key={id}>
                <h3>{name}</h3>
                <img src={`${featuredAsset.preview}?preset=small`} alt={name} />
            </div>
        ))
    ) : (
        <>Loading...</>
    );
}

import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import App from './App';

// Utwórz klienta
const queryClient = new QueryClient();

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
    <StrictMode>
        <QueryClientProvider client={queryClient}>
            <App />
        </QueryClientProvider>
    </StrictMode>
);