const reactQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 1000,
    }
  }
})

const MyApp: FC<AppProps> = ({ Component, pageProps }): AppProps) => {
  return (
    <QueryClientProvider client={reactQueryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      <Component {...pageProps} />
    </QueryClientProvider>
  )
}

// get request
const { isLoading, isError, error, data }: UseQueryResult<IPerson, Error> = useQuery<IPerson, Error, IPerson, string>(
  'person', // query key
  async () => {
    const res = await fetch('/api/person');
    return res.json();
  }, {
    staleTime: 5 * 1000,
    cacheTime,
    select: (person) => person.name // 원하는 person 데이터만 응답으로 넘길 수 있음, 3번째 타입을 string으로 변경해줘야 함
    // 보통은 설정하지 않고 default로 사용함
  }
);

if (isLoading) {
  return (
    <div>
      <p>Loading...</p>
    </div>
  )
}

if (isError) return <p> Error is {error?.message}</p>;

return (
  <>
    <p>{data?.id}</p>
    <p>{data?.name}</p>
    <p>{data?.age}</p>
  </>
)

const fetchPerson = async (): Promise<IPerson> => {
  const res = async fetch('/api/person');
  // need to do this with fetch since doesn't automatically throw errors axios and graphql-request do
  if (res.ok) { // 200 response
    return res.json();
  }
  throw new Error('Network response not ok'); // need to throw because react-query functions need to have error throw
}

const { isLoading, isError, error, data }: UseQueryResult<IPerson, Error> = useQuery<IPerson, Error, IPerson, string>(
  'person', // query key
  fetchPerson

const getPersonById = async(id: string | string[] | undefined): Promis<IPerson> => {
  if (typeof id === 'string') {
    const res = await fetch(`/api/person/${id}`);
    if(res.ok) {
      return res.json();
    }		
    throw new Error('error fetching user with id');
  }
  throw new Error('invalid id');
}

const PersonPage: FC = () => {
  const {
    query: { id },
  } = useRouter();

  const { isLoading, isError, error, data } = useQuery<IPerson, Error>(['person', id], () => getPersonById(id), {
    enabled: !!id, // enabled will stop a query from running, so will only call when id is available (dependent queries)
  });
}

if (isLoading) {
  return (
    <div>
      <p>Loading...</p>
    </div>
  )
}

if (isError) return <p> Error is {error?.message}</p>;

return (
  <>
    <p>{data?.id}</p>
    <p>{data?.name}</p>
    <p>{data?.age}</p>
  </>
)

const id = useQuery(getUserId);

const { isLoading, isError, error, data } = useQuery<IPerson, Error>(['person', id], () => getPersonById(id), {
  enabled: !!id,
});