๐Ÿ—‚ WIL/๐Ÿ“ Gql

    Apollo Client - Fetching

    โœ”๏ธ Apollo Client GraphQL๋กœ ๋กœ์ปฌ ๋ฐ์ดํ„ฐ์™€ ์›๊ฒฉ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” JavaScript์šฉ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ โœ”๏ธ Fetching 1. useQuery ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. (๋ณ€๊ฒฝ X) ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ์ž๋™์œผ๋กœ ์บ์‹œํ•จ. โš™๏ธ Updating cached query results 1. Polling : ์ง€์ •ํ•œ ์‹œ๊ฐ„์œผ๋กœ ์ฃผ๊ธฐ์ ์œผ๋กœ ์ฟผ๋ฆฌ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•ด์„œ, ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ด. 2. Refetching : user action์„ ํ†ตํ•ด์„œ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•. (ex. button) polling, refetching ์„ ํ•  ๋•Œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ fetching ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์—†๋Š”๋ฐ, notifyOnNetworkStatusChange : tru..

    GraphQL

    GraphQL

    1. GraphQL ์ด๋ž€? API ๋ฅผ ์œ„ํ•ด ๋งŒ๋“  ์ฟผ๋ฆฌ ์–ธ์–ด Rest API ๋Š” ๊ฐ๊ฐ ๋ฆฌ์†Œ์Šค์— ํ•ด๋‹นํ•˜๋Š” ์—”๋“œํฌ์ธํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ€์ ธ์˜จ๋‹ค๋ฉด, GraphQL ์€ ์—”๋“œํฌ์ธํŠธ๊ฐ€ ํ•œ๊ฐœ๋‹ค! ํ•˜๋‚˜์˜ ์—”๋“œํฌ์ธํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์ฟผ๋ฆฌ๋ฅผ ํ†ตํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์— ์š”์ฒญํ•˜๊ฒŒ ๋œ๋‹ค! const GET_DATA = gql` query getData(dataId: ID!) { data(id: $dataId) { id title author { id name photo } } } `; 2. ์ˆœ์„œ 1. ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด GraphQl ์„œ๋ฒ„์— ์ฟผ๋ฆฌ๋ฅผ ์ „์†กํ•œ๋‹ค. (POST or GET) 2. ์„œ๋ฒ„์—์„œ ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ ์š”์ฒญ์„ ๋ฐ›์œผ๋ฉด GraphQL ์ฟผ๋ฆฌ๋กœ ๋ฌธ์ž์—ด์„ ์ถ”์ถœํ•œ๋‹ค. => ๋งŒ์•ฝ ์š”์ฒญํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์Šคํ‚ค๋งˆ์— ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š๊ฑฐ๋‚˜..