# All files / src/chap06 QuerySuspense.js

0% Statements 0/11
0% Branches 0/2
0% Functions 0/4
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

     import { useQuery } from 'react-query';

    // delay 밀리초 동안 처리를 일시 정지하는 sleep 함수
    const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

    const fetchWeather = async () => {
      // 더미 지연
      await sleep(2000);
      // const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Tokyo&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`);
      const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Seoul&lang=kr&appid=6fd0c26b5a2a9ad110324cc29669eb7c`);
      if (res.ok) { return res.json(); }
      throw new Error(res.statusText);
    };

    export default function QuerySuspense() {
      const { data } = useQuery('weather', fetchWeather);
      // const { data } = useQuery('weather', fetchWeather, { suspense: true });

      return (
        <figure>
          <img
          src={`https://openweathermap.org/img/wn/${data?.weather?.[0]?.icon}.png`}
          alt={data?.weather?.[0]?.main} />
          <figcaption>{data?.weather?.[0]?.description}</figcaption>
        </figure>
      );
    }