BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Обновлены условия пропуска запросов в компонентах, чтобы учитывать случаи, когда vehicleId может быть undefined или null. Исправлены проверки в следующих компонентах: CatalogGroupsSection, CategoriesSection, GroupDetailsSection, QuickGroupsSection, UnitDetailsSection, UnitsSection, KnotIn, VinCategory, VinLeftbar, VehicleDetailsPage и PartDetailPage.

Browse Source
This commit is contained in:
Bivekich
2025-06-30 00:39:55 +03:00
parent f894b7e023
commit 4a3da4d5c5
11 changed files with 114 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CatalogGroupsSection.tsx
View File

@ -208,7 +208,7 @@ const CatalogGroupsSection: React.FC<CatalogGroupsSectionProps> = ({
vehicleId,
...(ssd && ssd.trim() !== '' && { ssd })
},
skip: !catalogCode || !vehicleId || catalogType !== 'quickGroups',
skip: !catalogCode || vehicleId === undefined || vehicleId === null || catalogType !== 'quickGroups',
errorPolicy: 'all'
}
);

2
src/components/CategoriesSection.tsx
View File

@ -33,7 +33,7 @@ const CategoriesSection: React.FC<CategoriesSectionProps> = ({
vehicleId,
...(ssd && ssd.trim() !== '' && { ssd })
},
skip: !catalogCode || !vehicleId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null,
errorPolicy: 'all'
}
);

6
src/components/GroupDetailsSection.tsx
View File

@ -187,13 +187,13 @@ const GroupDetailsSection: React.FC<GroupDetailsSectionProps> = ({
const { data, loading, error } = useQuery<{ laximoQuickDetail: LaximoQuickDetail }>(
GET_LAXIMO_QUICK_DETAIL,
{
variables: {
variables: quickGroupId ? {
catalogCode,
vehicleId,
quickGroupId,
ssd
},
skip: !catalogCode || !vehicleId || !quickGroupId || !ssd,
} : undefined,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !quickGroupId || !ssd || ssd.trim() === '',
errorPolicy: 'all'
}
);

76
src/components/QuickGroupsSection.tsx
View File

@ -154,13 +154,13 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
const { data: quickDetailData, loading: quickDetailLoading, error: quickDetailError } = useQuery<{ laximoQuickDetail: LaximoQuickDetail }>(
GET_LAXIMO_QUICK_DETAIL,
{
variables: {
variables: selectedGroup?.quickgroupid ? {
catalogCode,
vehicleId,
quickGroupId: selectedGroup.quickgroupid,
ssd
},
skip: !catalogCode || !vehicleId || !selectedGroup.quickgroupid || !ssd,
} : undefined,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !selectedGroup?.quickgroupid || !ssd || ssd.trim() === '',
errorPolicy: 'all',
fetchPolicy: 'cache-and-network' // Принудительно запрашиваем данные
}
@ -169,11 +169,28 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
const quickDetail = quickDetailData?.laximoQuickDetail;
// Добавляем отладочную информацию
console.log('🔍 QuickDetailSection Debug:');
console.log('📊 quickDetailData:', quickDetailData);
console.log('📋 quickDetail:', quickDetail);
console.log('🏗️ quickDetail.units:', quickDetail?.units);
console.log('⚙️ Variables:', { catalogCode, vehicleId, quickGroupId: selectedGroup.quickgroupid, ssd });
console.log('🔍 QuickDetailSection Debug:', {
catalogCode,
vehicleId,
vehicleIdType: typeof vehicleId,
quickGroupId: selectedGroup?.quickgroupid,
quickGroupIdType: typeof selectedGroup?.quickgroupid,
ssd: ssd ? `${ssd.substring(0, 30)}...` : 'отсутствует',
ssdType: typeof ssd,
ssdLength: ssd?.length,
hasData: !!quickDetailData,
hasQuickDetail: !!quickDetail,
unitsCount: quickDetail?.units?.length || 0,
loading: quickDetailLoading,
error: quickDetailError?.message,
skipCondition: !catalogCode || vehicleId === undefined || vehicleId === null || !selectedGroup?.quickgroupid || !ssd,
skipDetails: {
noCatalogCode: !catalogCode,
noVehicleId: vehicleId === undefined || vehicleId === null,
noQuickGroupId: !selectedGroup?.quickgroupid,
noSsd: !ssd
}
});
// Если выбран узел для детального просмотра, показываем UnitDetailsSection
if (selectedUnit) {
@ -213,6 +230,20 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
}
if (quickDetailError) {
console.error('🚨 QuickDetailSection Error Details:', {
message: quickDetailError.message,
graphQLErrors: quickDetailError.graphQLErrors,
networkError: quickDetailError.networkError,
extraInfo: quickDetailError.extraInfo,
selectedGroup: selectedGroup,
variables: selectedGroup?.quickgroupid ? {
catalogCode,
vehicleId,
quickGroupId: selectedGroup.quickgroupid,
ssd
} : 'undefined (no variables sent)'
});
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
@ -231,6 +262,33 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
<h3 className="text-lg font-medium text-red-600 mb-2">Ошибка загрузки деталей</h3>
<p className="text-red-700">Не удалось загрузить детали для группы "{selectedGroup.name}"</p>
<p className="text-sm text-red-600 mt-2">Ошибка: {quickDetailError.message}</p>
{/* Отладочная информация */}
<details className="mt-4">
<summary className="text-sm text-red-700 cursor-pointer hover:text-red-800">
🔧 Показать отладочную информацию
</summary>
<div className="mt-2 p-3 bg-red-100 rounded text-xs">
<div><strong>Catalog Code:</strong> {catalogCode}</div>
<div><strong>Vehicle ID:</strong> {vehicleId} (type: {typeof vehicleId})</div>
<div><strong>Quick Group ID:</strong> {selectedGroup?.quickgroupid} (type: {typeof selectedGroup?.quickgroupid})</div>
<div><strong>SSD:</strong> {ssd ? `${ssd.substring(0, 100)}...` : 'отсутствует'} (length: {ssd?.length})</div>
<div className="mt-2">
<strong>GraphQL Errors:</strong>
<pre className="mt-1 text-xs overflow-auto">
{JSON.stringify(quickDetailError.graphQLErrors, null, 2)}
</pre>
</div>
{quickDetailError.networkError && (
<div className="mt-2">
<strong>Network Error:</strong>
<pre className="mt-1 text-xs overflow-auto">
{JSON.stringify(quickDetailError.networkError, null, 2)}
</pre>
</div>
)}
</div>
</details>
</div>
</div>
);
@ -464,7 +522,7 @@ const QuickGroupsSection: React.FC<QuickGroupsSectionProps> = ({
vehicleId,
...(ssd && ssd.trim() !== '' && { ssd })
},
skip: !catalogCode || !vehicleId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null,
errorPolicy: 'all'
}
);

6
src/components/UnitDetailsSection.tsx
View File

@ -39,7 +39,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
unitId,
ssd: ssd || ''
},
skip: !catalogCode || !vehicleId || !unitId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
errorPolicy: 'all'
}
);
@ -54,7 +54,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
unitId,
ssd: ssd || ''
},
skip: !catalogCode || !vehicleId || !unitId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
errorPolicy: 'all'
}
);
@ -69,7 +69,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
unitId,
ssd: ssd || ''
},
skip: !catalogCode || !vehicleId || !unitId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
errorPolicy: 'all'
}
);

2
src/components/UnitsSection.tsx
View File

@ -59,7 +59,7 @@ const UnitsSection: React.FC<UnitsSectionProps> = ({
categoryId,
...(ssd && ssd.trim() !== '' && { ssd })
},
skip: !catalogCode || !vehicleId || !categoryId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !categoryId,
errorPolicy: 'all',
fetchPolicy: 'no-cache', // Полностью отключаем кэширование для гарантии свежих данных
notifyOnNetworkStatusChange: true

4
src/components/vin/KnotIn.tsx
View File

@ -47,7 +47,7 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
GET_LAXIMO_UNIT_INFO,
{
variables: { catalogCode, vehicleId, unitId, ssd: ssd || '' },
skip: !catalogCode || !vehicleId || !unitId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
errorPolicy: 'all',
}
);
@ -56,7 +56,7 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
GET_LAXIMO_UNIT_IMAGE_MAP,
{
variables: { catalogCode, vehicleId, unitId, ssd: ssd || '' },
skip: !catalogCode || !vehicleId || !unitId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
errorPolicy: 'all',
}
);

2
src/components/vin/VinCategory.tsx
View File

@ -12,7 +12,7 @@ interface VinCategoryProps {
const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect }) => {
const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
variables: { catalogCode, vehicleId, ssd },
skip: !catalogCode || !vehicleId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null,
errorPolicy: "all",
});
const categories = categoriesData?.laximoCategories || [];

32
src/components/vin/VinLeftbar.tsx
View File

@ -25,7 +25,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
variables: { catalogCode, vehicleId, ssd },
skip: !catalogCode || !vehicleId,
skip: !catalogCode || vehicleId === undefined || vehicleId === null,
errorPolicy: 'all'
});
const categories = categoriesData?.laximoCategories || [];
@ -88,7 +88,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
}, [searchResults, searchQuery, onSearchResults]);
// --- Новый блок: вычисляем доступность поиска ---
const isSearchAvailable = !!catalogCode && !!vehicleId && !!ssd && ssd.trim() !== '';
const isSearchAvailable = !!catalogCode && vehicleId !== undefined && vehicleId !== null && !!ssd && ssd.trim() !== '';
const showWarning = !isSearchAvailable;
const showError = !!error && isSearchAvailable && searchQuery.trim();
const showNotFound = isSearchAvailable && searchQuery.trim() && !loading && data && searchResults && searchResults.details && searchResults.details.length === 0;
@ -98,7 +98,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
const [selectedQuickGroup, setSelectedQuickGroup] = useState<any | null>(null);
const { data: quickGroupsData, loading: quickGroupsLoading, error: quickGroupsError } = useQuery(GET_LAXIMO_QUICK_GROUPS, {
variables: { catalogCode, vehicleId, ssd },
skip: !catalogCode || !vehicleId || activeTab !== 'manufacturer',
skip: !catalogCode || vehicleId === undefined || vehicleId === null || activeTab !== 'manufacturer',
errorPolicy: 'all'
});
const quickGroups = quickGroupsData?.laximoQuickGroups || [];
@ -136,12 +136,30 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
const skipQuickDetail =
!selectedQuickGroup ||
!catalogCode ||
!vehicleId ||
!selectedQuickGroup.quickgroupid ||
!ssd;
vehicleId === undefined ||
vehicleId === null ||
!selectedQuickGroup?.quickgroupid ||
!ssd ||
ssd.trim() === '';
console.log('QuickDetail QUERY VARS', {
catalogCode,
vehicleId,
quickGroupId: selectedQuickGroup?.quickgroupid,
ssd: ssd ? `${ssd.substring(0, 30)}...` : 'отсутствует'
});
console.log('QuickDetail SKIP CONDITIONS', {
hasSelectedQuickGroup: !!selectedQuickGroup,
hasCatalogCode: !!catalogCode,
hasVehicleId: vehicleId !== undefined && vehicleId !== null,
hasQuickGroupId: !!selectedQuickGroup?.quickgroupid,
hasSsd: !!ssd && ssd.trim() !== '',
skipQuickDetail
});
const { data: quickDetailData, loading: quickDetailLoading, error: quickDetailError } = useQuery(GET_LAXIMO_QUICK_DETAIL, {
variables: selectedQuickGroup ? {
variables: selectedQuickGroup?.quickgroupid && !skipQuickDetail ? {
catalogCode,
vehicleId,
quickGroupId: selectedQuickGroup.quickgroupid,

14
src/pages/vehicle-search/[brand]/[vehicleId].tsx
View File

@ -123,7 +123,7 @@ const VehicleDetailsPage = () => {
...(finalSsd && { ssd: finalSsd }),
localized: true
},
skip: !brand || !vehicleId,
skip: !brand || vehicleId === undefined || vehicleId === null,
errorPolicy: 'all'
}
);
@ -194,8 +194,9 @@ const VehicleDetailsPage = () => {
);
}
// Если vehicleId невалидный (например, '0'), показываем предупреждение и не рендерим поиск
if (!vehicleId || vehicleId === '0') {
// Если vehicleId отсутствует или пустой, показываем предупреждение
// Важно: vehicleId может быть '0' для некоторых автомобилей, найденных по VIN
if (!vehicleId || vehicleId === '') {
return (
<main className="min-h-screen bg-yellow-50 flex items-center justify-center">
<div className="text-center">
@ -214,7 +215,8 @@ const VehicleDetailsPage = () => {
// Гарантируем, что vehicleId — строка
const vehicleIdStr = Array.isArray(vehicleId) ? (vehicleId[0] || '') : (vehicleId || '');
const fallbackVehicleId = (vehicleIdStr !== '0' ? vehicleIdStr : '');
// Для Laximo API vehicleId может быть '0' для автомобилей, найденных по VIN
const fallbackVehicleId = vehicleIdStr;
let vehicleInfo = vehicleData?.laximoVehicleInfo || {
vehicleid: fallbackVehicleId,
@ -225,8 +227,8 @@ const VehicleDetailsPage = () => {
attributes: [] as never[]
};
// Если вдруг с сервера пришёл vehicleid: '0', подменяем на корректный
if (vehicleInfo.vehicleid === '0' && fallbackVehicleId) {
// Убеждаемся, что vehicleid соответствует параметру из URL
if (vehicleInfo.vehicleid !== fallbackVehicleId && fallbackVehicleId) {
vehicleInfo = { ...vehicleInfo, vehicleid: fallbackVehicleId };
}

4
src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber].tsx
View File

@ -74,12 +74,12 @@ const PartDetailPage = () => {
oemNumber: oemNumber,
ssd: finalSsd
},
skip: !brand || !vehicleId || !oemNumber || !finalSsd,
skip: !brand || vehicleId === undefined || vehicleId === null || !oemNumber || !finalSsd,
errorPolicy: 'all'
}
);
if (!brand || !vehicleId || !oemNumber) {
if (!brand || vehicleId === undefined || vehicleId === null || !oemNumber) {
return (
<>
<Head>