Apollo-client์์ query๋ฅผ ๋ถ๋ฌ์ค๋ ค๋ฉด useQuery Hook์ ์ฌ์ฉํ๋ฉด ๋๋ค.
useQuery
๋ useMutation๊ณผ๋ ์ฌ์ฉํ๋ ๋ฐฉ์์ ๋น์ทํ์ง๋ง ๋ค๋ฅธ์ ์ด ์๋ค.
useMutation ๊ฐ์ ๊ฒฝ์ฐ๋ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ์คํ์ด ๋์ง๋ง useQuery๋ ํ์ด์ง๊ฐ ์ด๋ฆฌ์๋ง์ ๋ฐ๋ก ์์ฒญ์ ๋ณด๋ด๊ฒ ๋๋ค.
variables ๋ ์คํํ๋ ์์น์ ๋ฃ์ด์ฃผ์ด์ผ ํ๋ฏ๋ก useQuery๋ฅผ ๋ถ๋ฌ์ค์๋ง์ variables ๋ฅผ ์ ์ด์ค๋ค.
๋ถ๋ช
์์ data ๊ฐ์ ์ฝ์์ ์ฐํ๋๋ฐ ์ ์ด๋ฐ ์๋ฌ๊ฐ ๋๋ ๊ฒ์ผ๊น?
์ผ๋จ ํ์ด์ง๊ฐ ๋ ๋๋ง์ด ๋๋ฉด ์์ฒญ์ด ๋ ์๊ฐ๋ค. ์์ฒญ์ด ๋ ์๊ฐ ์ํ์์๋ ๋ฐ์ดํฐ๊ฐ ์๋ฌด๊ฒ๋ ์์ด์ ๋น์ด์๋ undefined ์ํ์ด๋ค. ์ด๋ data๊ฐ ์ธ์ ์ค๋์ง๋ ๋ชจ๋ฅด๊ณ ์ค๋๋์์ ํ๋ฉด์ด ๋๋ฌด ์ค๋ซ๋์ ๋น ํ๋ฉด์ผ๋ก ์์ ์๋ ์๊ธฐ ๋๋ฌธ์ await ๋ฑ์ ์ธ ์ ์๋ค. ๊ทธ๋์ ๊ทธ ์ฌ์ด์ fetchBoard๋ฅผ ์ฐพ์ ์ ์๋ค๋ ์๋ฌ๋ฅผ ๋ฐ๊ฒฌํ ์ ์๋ค. ์ด๋ ์ต์ ๋์ฒด์ด๋์ ์ฌ์ฉํด์ฃผ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋๋ค.
data?.fetchBoard
ํ์ด์ง ์ด๋์ ๋งํ๋ค.
const router = useRouter()
router.push('์ด๋ํ ํ์ด์ง')
router.replace()
router.pathname
์ข
๋ฅ๋ ์ ์ ๋ผ์ฐํ
๊ณผ ๋์ ๋ผ์ฐํ
๋๊ฐ์ง๊ฐ ์๋ค.
์ ์ ๋ผ์ฐํ
์ ์ผ๋ฐ์ ์ธ ํ์ด์ง ์ด๋์ด๋ค.
๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ์ ์ ๋ผ์ฐํ
์ ๊ตฌํ ํ ์ ์๋ค.
์ฌ๊ธฐ์ ๋ฒํผ๋ง๋ค ๊ฐ๊ฐ ๋ค๋ฅธ ๊ฒ์๊ธ๋ก ์ด๋ํ๊ณ ์ถ์ ๋๋ ์ฝ๋๋ฅผ ์ด๋ป๊ฒ ์์ฑํ๋ฉด ๋ ๊น?
์ด๋ ๊ฒ ์์ฑํด๋ ์ด๋์ ๋๊ฒ ์ง๋ง ๊ฒ์๊ธ์ด ์์์ด ๋ง์์ง๋ค๊ณ ํ๋ค๋ฉด ๊ตฌํํ๊ธฐ ์ด๋ ค์ธ ๊ฒ์ด๋ค.
๊ทธ๋์ ๋์ ๋ผ์ฐํ
์ด ํ์ํ๋ค.
์ฐ์ ๊ฒ์๊ธ ๋ฐ์ดํฐ๋ฅผ ๋์ ์ผ๋ก ๋ฐ์์๋ณด์.
๊ฒ์๊ธ์ด ๋ด๊ธด ํด๋๋ช
์ [aaa]
๋๊ดํธ๋ก ๋ฌถ์ด์ค๋ค.
- aaa๋ ํ์ด์ง ๊ฐ ์๋๋ผ ๋ณ์๋ฅผ ์๋ฏธํ๋ค.
- ์ด๋ค ๋ด์ฉ์ด๋ ๋ค ์
๋ ฅ ๊ฐ๋ฅํ๋ค.
- ๋ณ์๋ช
์ผ๋ก fetchBoardํ๋ฉด ๋๋ค.
ํ์ด์ง๋ฅผ ํ๋๋ง ๋ง๋ค๊ณ ๋ด์ฉ์ ๋์ ์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์๊ฒ ๋๋ค.
์ฝ์์ ๋ฐ์ดํฐ๋ฅผ ์ฐ์ด๋ณด๋ฉด query์ aaa ๊ฐ ์ด๋ ๊ฒ ๋ค์ด๊ฐ ์๋ ๊ฒ์ ์ ์ ์๋ค.
๊ทธ๋ ๋ค๋ฉด ๋ผ์ฐํ
๋ ํ์ด์ง์ ๋ด์ฉ์ router.query.aaa
์ด๋ ๊ฒ ๋ถ๋ฌ์ค๋ฉด ๋๋ค.
๋ผ์ฐํ ํ ํ์ด์ง ๋ํ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ด์ฉํด ๋์ ์ผ๋ก routing ํด์ค์ผ ํ๋ค.
์ด๊ฒ ๋ฌด์กฐ๊ฑด ์ฑ๊ณตํ๋ฉด ์ข์๋ฐ ์๋๋ฅผ ํด์ฃผ์ด์ผ ํ๋ค. ์ด๋ ์ฌ์ฉํ๋ ๊ฒ์ด try์ catch์ด๋ค. ์ด๋ error.message๋ก error ๋ฉ์ธ์ง๋ ๋ฐ์ ์ ์๋ค.
์๋๋ฅผ ์ฑ๊ณตํ๋ ์คํจํ๋ ๋ฌด์กฐ๊ฑด ์คํ์ํค๊ณ ์ถ์ ์ฝ๋๊ฐ ์์ ๋๋ catch ๋ฐ์ finally๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.