ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • GraphQL - [ useQuery & useLazyQuery ]
    ๊ฐœ๋ฐœ 2021. 2. 17. 15:54

     

    ๐ŸŒธ TIL

     

     

     

    ์ด๋ฒˆ์— ํšŒ์‚ฌ์—์„œ ๋‹ด๋‹นํ•˜๋Š” ํ”„๋กœ์ ํŠธ์— ์ „๋ถ€ํ„ฐ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ GraphQL์„ ์ ์šฉํ•ด๋ณด์•˜๋‹ค.

    ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ ๋•Œ๋ฌธ์— ์•„์ง๊นŒ์ง€๋Š” ์ข‹์€ ํผํฌ๋จผ์Šค๋ฅผ ๋ณด์ผ ์ˆ˜ ์—†์ง€๋งŒ ๋‹จ์‹œ๊ฐ„์— ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด๋ฉฐ ๋น ๋ฅด๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ๋„ ํฐ ์žฅ์ ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค.

     

    ์„œ๋ฒ„์—์„œ๋Š” ์–ด๋–ค์‹์œผ๋กœ typeDefs๋ฅผ ์„ค๊ณ„ํ•˜๊ณ , resolvers๋Š” ์–ด๋–ค์‹์œผ๋กœ ์ž‘์„ฑ์ด ๋˜๋Š”์ง€ ๊ฐ„๋‹จํ•˜๊ฒŒ๋‚˜๋งˆ ์ดํ•ดํ•˜๊ณ  client์™€ server๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•˜์—ฌ ํ•œ ์‹ธ์ดํด์„ ํƒ€๋ณด๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์„œ ์ฒ˜์Œ์—๋Š” ์„œ๋ฒ„๋Š” Node๋ฅผ, ํด๋ผ์ด์–ธํŠธ๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์•˜์—ˆ๋‹ค.

     

    ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์˜ ํ๋ฆ„์„ ํŒŒ์•…ํ•˜๊ณ  ๋‚˜๋‹ˆ๊นŒ ์‹ค์ œ ์„œ๋น„์Šค์— ์ ์šฉํ•˜๋Š” ์‹œ๊ฐ„๋„ ์ ˆ์•ฝ๋˜์—ˆ๊ณ , ์ดํ•ด๋„ ๋” ๋น ๋ฅด๊ณ , ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ณผ์˜ ์†Œํ†ต๋„ ์ข€ ๋” ์›ํ™œํ•˜๊ฒŒ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด ํ˜‘์—…์— ๋„์›€์ด ๋˜์—ˆ๋‹ค.

     

    GraphQL์€ ๊ณต์‹๋ฌธ์„œ๋„ ์ž˜ ๋˜์–ด์žˆ๊ณ , ๊ฒ€์ƒ‰ํ•˜๋ฉด ์ข‹์€ ์ž๋ฃŒ๋“ค์ด ๋งŽ์ด ๋‚˜์™€์„œ ๋‹ค๋ฃจ๋Š” ๋ฒ•์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์ƒ๋žตํ•˜๊ณ , GraphQL์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ฒ˜์Œ์ด๋‹ค๋ณด๋‹ˆ ํ—ท๊ฐˆ๋ ธ๋˜ ๋ช‡๊ฐ€์ง€๋ฅผ ์ •๋ฆฌํ•ด๋‚˜๊ฐˆ ์˜ˆ์ •์ด๋‹ค.

     

     


     

     

    ๐Ÿ‘‰ useQuery์™€ useLazyQuery์˜ ์ฐจ์ด์  ๐Ÿ‘ˆ

     

    ๊ฐ„๋‹จํ•œ ์˜ˆ์‹œ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํด๋ผ์ด์–ธํŠธ ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค.

     

     

     

     

    GET_GREETING์ด๋ผ๋Š” query๊ฐ€ ์žˆ๊ณ , ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ, loadGreeting ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ํ•˜๋ฉด์„œ useQuery๋กœ ์„œ๋ฒ„์— ์žˆ๋Š” message๋ฅผ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ•œ๋‹ค.

     

    ํ•˜์ง€๋งŒ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

     

     

    useQuery๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜ ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ ์ด์— ๋Œ€ํ•œ ์„ค๋ช…์€ ๊ณต์‹๋ฌธ์„œ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‚˜์™€์žˆ๋‹ค.

     

     

     

     

    useQuery๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ Mount, Render ๋  ๋•Œ, apollo client๊ฐ€ ์ž๋™์œผ๋กœ ์‹คํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š” ๊ฒƒ์ด๋‹ค.

    useLazyQuery๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ Render ๋  ๋•Œ๊ฐ€ ์•„๋‹Œ ์–ด๋– ํ•œ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด Query๋ฅผ ์‹คํ–‰ํ•˜๊ฒŒ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์–ด์•ผ ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค.

     

     

    ๐Ÿ’ป ๋ธŒ๋ผ์šฐ์ € ์ฝ˜์†” ํ™•์ธ

     

    getGreeting์˜ message์— ์„œ๋ฒ„์— ์ €์žฅํ•ด๋‘์—ˆ๋˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ์œ„์—์„œ ํ™•์ธํ–ˆ๋“ฏ์ด useQuery์™€ useLazyQuery๋Š” returnํ•˜๋Š” ๊ฐ’๋„ ๋‹ค๋ฅด๋‹ค !

    useQuery๋Š” query์— ๋Œ€ํ•œ ๊ฒฐ๊ณผ๋ฅผ ์‘๋‹ตํ•ด์ฃผ๊ณ , useLazyQuery๋Š” ๊ฒฐ๊ณผ + ์ฟผ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜๋ฅผ returnํ•ด ์ค€๋‹ค.

     

     

     

     


     

     

    ๋งˆ์น˜๋ฉฐ ๐ŸŒธ

     

    ์•„์ง๊นŒ์ง€๋Š” ๋งŽ์€ API๋ฅผ GraphQl๋กœ ๊ตฌํ˜„ํ•ด๋ณด์ง€ ์•Š์•„์„œ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์˜ ์žฅ์ ์€ ํฌ๊ฒŒ ์™€๋‹ฟ์ง€๋Š” ์•Š๋Š”๋‹ค.

     

    ์ง€๊ธˆ๊นŒ์ง€ ์จ๋ณด๋ฉด์„œ ๋Š๊ผˆ๋˜ GraphQl์˜ ๊ฐ•์ ์„ ์ •๋ฆฌํ•ด๋ณด์ž๋ฉด

     

    1. ํ•„์š”ํ•œ ์ •๋ณด๋“ค๋งŒ ์„ ํƒํ•˜์—ฌ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

    • OverFetching ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ฐ€๋Šฅ
    • ๋ฐ์ดํ„ฐ ์ „์†ก๋Ÿ‰ ๊ฐ์†Œ

    2. ์—ฌ๋Ÿฌ ์ •๋ณด๋“ค์„ ํ•œ๋ฒˆ์— ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

    • UnderFetching ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ฐ€๋Šฅ
    • ์š”์ฒญ ํšŸ์ˆ˜ ๊ฐ์†Œ

    3. ํ•˜๋‚˜์˜ EndPoint ์—์„œ ๋ชจ๋“  ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

    • ํ•˜๋‚˜์˜ URL์—์„œ POST๋กœ ๋ชจ๋“  ์š”์ฒญ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅ

    ์•ž์œผ๋กœ ์ข€ ๋” ๊นŠ์ด์žˆ๊ฒŒ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ๋” ๋งŽ์€ ์žฅ์ ๋“ค์„ ์•Œ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๊ณ  ๋‹จ์  ๋˜ํ•œ ๋Š๊ปด๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

     

     

     

     

    ๋Œ“๊ธ€ 0

Designed by Tistory.