first commit

src/hooks/useArticleImage.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect, useRef } from 'react';
+import { useQuery } from '@apollo/client';
+import { GET_PARTSAPI_MAIN_IMAGE } from '@/lib/graphql';
+import { PartsAPIMainImageData, PartsAPIMainImageVariables } from '@/types/partsapi';
+
+interface UseArticleImageOptions {
+  enabled?: boolean;
+  fallbackImage?: string;
+}
+
+interface UseArticleImageReturn {
+  imageUrl: string;
+  isLoading: boolean;
+  error: boolean;
+}
+
+export const useArticleImage = (
+  artId: string | undefined | null,
+  options: UseArticleImageOptions = {}
+): UseArticleImageReturn => {
+  const { enabled = true, fallbackImage = '' } = options;
+  const [imageUrl, setImageUrl] = useState<string>(fallbackImage);
+
+  // Проверяем что artId валидный
+  const shouldFetch = enabled && artId && artId.trim() !== '';
+
+  const { data, loading, error } = useQuery<PartsAPIMainImageData, PartsAPIMainImageVariables>(
+    GET_PARTSAPI_MAIN_IMAGE,
+    {
+      variables: { artId: artId || '' },
+      skip: !shouldFetch,
+      fetchPolicy: 'cache-first',
+      errorPolicy: 'all',
+      onCompleted: (data) => {
+        const url = data?.partsAPIMainImage;
+        if (url && url !== null) {
+          setImageUrl(url);
+        } else {
+          setImageUrl(fallbackImage);
+        }
+      },
+      onError: (error) => {
+        setImageUrl(fallbackImage);
+      }
+    }
+  );
+
+  return {
+    imageUrl,
+    isLoading: loading,
+    error: !!error
+  };
+};