mirror of
https://github.com/unraid/api.git
synced 2026-01-05 16:09:49 -06:00
2c62e0ad09
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Streamlined Tailwind CSS integration using Vite plugin, eliminating the need for separate Tailwind config files. * Updated theme and color variables for improved consistency and maintainability. * **Style** * Standardized spacing, sizing, and font classes across all components using Tailwind’s default scale. * Reduced excessive gaps, padding, and font sizes for a more compact and cohesive UI. * Updated gradient, border, and shadow classes to match Tailwind v4 conventions. * Replaced custom pixel-based classes with Tailwind’s bracketed arbitrary value syntax where needed. * Replaced focus outline styles from `outline-none` to `outline-hidden` for consistent focus handling. * Updated flex shrink/grow utility classes to use newer shorthand forms. * Converted several component templates to use self-closing tags for cleaner markup. * Adjusted icon sizes and spacing for improved visual balance. * **Chores** * Removed legacy Tailwind/PostCSS configuration files and related scripts. * Updated and cleaned up package dependencies for Tailwind v4 and related plugins. * Removed unused or redundant build scripts and configuration exports. * Updated documentation to reflect new Tailwind v4 usage. * Removed Prettier Tailwind plugin from formatting configurations. * Removed Nuxt Tailwind module in favor of direct Vite plugin integration. * Cleaned up ESLint config by removing Prettier integration. * **Bug Fixes** * Corrected invalid or outdated Tailwind class names and syntax. * Fixed issues with max-width and other utility classes for improved layout consistency. * **Tests** * Updated test assertions to match new class names and styling conventions. * **Documentation** * Revised README and internal notes to clarify Tailwind v4 adoption and configuration changes. * Added new development notes emphasizing Tailwind v4 usage and documentation references. * **UI Components** * Enhanced BrandButton stories with detailed variant, size, and padding showcases for better visual testing. * Improved theme store to apply dark mode class on both `<html>` and `<body>` elements for compatibility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import { ApolloClient, ApolloLink, createHttpLink, from, split } from '@apollo/client/core/index.js';
|
|
import { onError } from '@apollo/client/link/error/index.js';
|
|
import { RetryLink } from '@apollo/client/link/retry/index.js';
|
|
import { GraphQLWsLink } from '@apollo/client/link/subscriptions/index.js';
|
|
import { getMainDefinition } from '@apollo/client/utilities/index.js';
|
|
import { createClient } from 'graphql-ws';
|
|
import { createApolloCache } from './apollo-cache';
|
|
import { WEBGUI_GRAPHQL } from './urls';
|
|
|
|
const httpEndpoint = WEBGUI_GRAPHQL;
|
|
const wsEndpoint = new URL(WEBGUI_GRAPHQL.toString().replace('http', 'ws'));
|
|
const DEV_MODE = (globalThis as unknown as { __DEV__: boolean }).__DEV__ ?? false;
|
|
|
|
const headers = {
|
|
'x-csrf-token': globalThis.csrf_token ?? '0000000000000000',
|
|
};
|
|
|
|
const httpLink = createHttpLink({
|
|
uri: httpEndpoint.toString(),
|
|
headers,
|
|
credentials: 'include',
|
|
});
|
|
|
|
const wsLink = new GraphQLWsLink(
|
|
createClient({
|
|
url: wsEndpoint.toString(),
|
|
connectionParams: () => headers,
|
|
})
|
|
);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const errorLink = onError(({ graphQLErrors, networkError }: any) => {
|
|
if (graphQLErrors) {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
graphQLErrors.map((error: any) => {
|
|
console.error('[GraphQL error]', error);
|
|
const errorMsg = error.error?.message ?? error.message;
|
|
if (errorMsg?.includes('offline')) {
|
|
// @todo restart the api, but make sure not to trigger infinite loop
|
|
}
|
|
return error.message;
|
|
});
|
|
}
|
|
|
|
if (networkError) {
|
|
console.error(`[Network error]: ${networkError}`);
|
|
const msg = networkError.message ? networkError.message : networkError;
|
|
if (typeof msg === 'string' && msg.includes('Unexpected token < in JSON at position 0')) {
|
|
return 'Unraid API • CORS Error';
|
|
}
|
|
return msg;
|
|
}
|
|
});
|
|
|
|
const retryLink = new RetryLink({
|
|
attempts: {
|
|
max: 20,
|
|
retryIf: (error, _operation) => {
|
|
return Boolean(error);
|
|
},
|
|
},
|
|
delay: {
|
|
initial: 300,
|
|
max: 10000,
|
|
jitter: true,
|
|
},
|
|
});
|
|
|
|
// Disable Apollo Client if not in DEV Mode and server state says unraid-api is not running
|
|
const disableQueryLink = new ApolloLink((operation, forward) => {
|
|
if (!DEV_MODE && operation.getContext().serverState?.unraidApi?.status === 'offline') {
|
|
return null;
|
|
}
|
|
return forward(operation);
|
|
});
|
|
|
|
const splitLinks = split(
|
|
({ query }) => {
|
|
const definition = getMainDefinition(query);
|
|
return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
|
|
},
|
|
wsLink,
|
|
httpLink
|
|
);
|
|
|
|
/**
|
|
* @todo as we add retries, determine which we'll need
|
|
* https://www.apollographql.com/docs/react/api/link/introduction/#additive-composition
|
|
* https://www.apollographql.com/docs/react/api/link/introduction/#directional-composition
|
|
*/
|
|
const additiveLink = from([errorLink, retryLink, disableQueryLink, splitLinks]);
|
|
|
|
export const client = new ApolloClient({
|
|
link: additiveLink,
|
|
cache: createApolloCache(),
|
|
});
|