Как отличить исходные данные от полученных?

Вопрос или проблема

export const useCurrentUser = () => {
  const enabled = !isGuestUser();

  return useQuery({
    queryKey: ['currentUser'],
    queryFn: () => getCurrentUser(),
    gcTime: Infinity,
    initialData: enabled
      ? (jwtDecode(localStorage.getItem('token') as string) as User)
      : ({} as User),
    enabled,
    refetchOnWindowFocus: false,
  });
};

Ответ или решение

Чтобы различать initialData и данные, полученные в результате запроса, вы можете использовать несколько подходов. Вот один из ярких способов решения вашей задачи.

Шаги для различения initialData и полученных данных:

1. Добавление флага в данные: Вы можете модифицировать формат ваших данных, добавляя специальный флаг, который будет указывать, что данные были получены из начальной загрузки или из запроса. Например:

const initialData = enabled
  ? { ...jwtDecode(localStorage.getItem('token') as string), fromInitialLoad: true }
  : { fromInitialLoad: true };

1. Проверка данных после загрузки: Когда данные загружаются с сервера, вы можете убрать этот флаг или изменить его значение:

return useQuery({
  queryKey: ['currentUser'],
  queryFn: async () => {
    const user = await getCurrentUser();
    return { ...user, fromInitialLoad: false };  // Установите флаг на false
  },
  gcTime: Infinity,
  initialData,
  enabled,
  refetchOnWindowFocus: false,
});

1. Использование data внутри компонента: В вашем компоненте вы можете использовать новое свойство fromInitialLoad, чтобы различать данные:

const { data } = useCurrentUser();

if (data.fromInitialLoad) {
  console.log('Данные загружены из начальной загрузки:', data);
} else {
  console.log('Данные загружены с сервера:', data);
}

Дополнительные рекомендации:

• Типизация данных: Убедитесь, что ваши типы данных учитывают наличие нового поля fromInitialLoad. Это поможет избежать ошибок во время разработки.

• Обработка состояния загрузки и ошибок: Не забывайте обрабатывать состояния загрузки и ошибки соединения, чтобы улучшить пользовательский опыт.

• Кеширование: Если вы используете кеширование данных, убедитесь, что ваша логика кеширования корректно обрабатывает случаи с initialData, чтобы избежать переписывания уже загруженных данных.

Таким образом, вы сможете легко отличить данные, полученные от начальной загрузки, от данных, полученных с сервера, и использовать это различие в вашем приложении.