2025-09-22 ãTypeScriptã®ã¹ãã¼ãé§åéçºãå®è·µäºä¾ LT
2025-09-22 ãTypeScriptã®ã¹ãã¼ãé§åéçºãå®è·µäºä¾ LT
ã¯ããã« ãã¤ã¯ããµã¼ãã¹ã®éçºã§ã¯ããµã¼ãã¹ãå¢ãç¶ããããã¯ã¨ã³ãã«å¯¾ãã¦ãããã³ãã¨ã³ãã¯æ¥ç¶å ãå¢ãããããéçºå¹çãä¸ãã¦ãã¾ãã¾ãããã®å¯¾çã¨ãã¦ããã¾ãã¾ãªè¨è¨ãã¿ã¼ã³ãåå¨ãã¾ãã å¼ç¤¾ã®éçºã§ã¯GraphQL Gatewayãç¨ãã¦ãã¾ãããããã«è³ãã¾ã§ãå¨è¾ºã®æè¡/ã¢ã¼ããã¯ãã£ã解説ãã¾ãã ãã¤ã¯ããµã¼ãã¹ã¨ããã³ãã¨ã³ã ãã¤ã¯ããµã¼ãã¹ãæ¡ç¨ããå ´åãããã³ãã¨ã³ãï¼ã¦ã§ãã¢ããªã±ã¼ã·ã§ã³ãã¢ãã¤ã«ã¢ããªã±ã¼ã·ã§ã³ãªã©ï¼ã¯è¤æ°ã®ãµã¼ãã¹ã¨ã®é£æºãå¿ è¦ã«ãªããã¨ãå¤ãã§ããåãã¤ã¯ããµã¼ãã¹ã¯é常ãAPIï¼RESTãgRPCãªã©ï¼ãæä¾ããããã³ãã¨ã³ãã¯ãããã®APIãéãã¦ãã¼ã¿ã®åå¾ãæä½ãè¡ãã¾ãã API Gateway API Gatewayã¯ãããã³ãã¨ã³ãã¨ãã¤ã¯ããµã¼ãã¹éã®ä¸éã«ä½ç½®ããã³ã³ãã¼ãã³ãã¨ãã¦æ©è½ãããã¤ã¯ããµã¼ãã¹ã¢ã¼ããã¯ã
ããã«ã¡ã¯ãid:aerealã§ãã ä»åã¯GraphQLã®ã¹ãã¼ã管çã工夫ãã¦ããç¹ã«ã¤ãã¦ç´¹ä»ãã¾ãã èæ¯ 対象ã¨ãªãã¢ããªã±ã¼ã·ã§ã³ã¯å æ¥ãã¬ã¹ãªãªã¼ã¹ãåºãããå¦ç¿ãã¬ã¼ãã³ã°æ©è½ãè£ã§æ¯ãã¦ããã³ã³ãã³ã管çã·ã¹ãã (以ä¸ãå é¨CMS) ã§ãã¨ã³ãã¦ã¼ã¶åããå«ãè¤æ°ã®ãµã¼ãã¹ããå¼ã³åºããã¾ããã¾ãAngularã§æ¸ãããWeb UIãåãã¾ãã å é¨CMSãéçºãããã¼ã å ã«ã¯ä¸»ã«ãµã¼ããµã¤ããæ å½ããã¡ã³ãã¼ã¨ã主ã«ã¯ã©ã¤ã¢ã³ããµã¤ããæ å½ããã¡ã³ãã¼ã¨ããããã©ã¡ããGraphQLãç¨ããéçºçµé¨ãããã¾ãã ãã®å é¨CMSã¯ã¹ã¯ã©ããããéçºãå§ãã¦ãããç®æããªãªã¼ã¹äºå®æ¥ã«å¯¾ãã¦ãããã¨ã¯å±±ç©ã¿ãªã®ã§ãã¾ãã¿ã¹ã¯ãåæ ãããç¶æ³ã«ããã¾ããã æã¨å ´åã«ãã£ã¦ã¯ã¯ã©ã¤ã¢ã³ããµã¤ãã®ãã¼ã ã®æã空ãã¦ããããããã¯éã«ãªã£ãããç¶æ³ã¯ç®ã¾ããããå¤ããã¾ãã ã§
çããããã«ã¡ã¯ãããã¯ãçè ãæè¿å ¬éããnitrogqlã宣ä¼ããè¨äºã§ããnitrogqlã®æ¦è¦ããéçºã«ããã£ã¦ã®è£è©±ãªã©ãç´¹ä»ãã¾ãã nitrogqlã¨ã¯ nitrogqlã¯ãTypeScriptã³ã¼ãããGraphQLã使ç¨ããããã®ãã¼ã«ã§ããæä½ã«ããã°ãgraphql-code-generatorãç½®ãæãããã¨ãç®æãã¦éçºãã¦ãã¾ããå ·ä½çã«ã¯ã.graphqlãã¡ã¤ã«ããTypeScriptã®åå®ç¾©ãçæããæ©è½ãåãã¦ãã¾ãã ä¾ãã°ã次ã®ãããªã¯ã¨ãªããã£ãã¨ãã¾ãã query ($unfinishedOnly: Boolean) { todos(filter: { unfinishedOnly: $unfinishedOnly }) { id body createdAt finishedAt tags { id label color } } } imp
Capture, share, & collaborate on knowledge internally. TLDR: Use GraphQL for client-server communication and gRPC for server-to-server. See the Verdict section for exceptions to this rule. I've read a lot of comparisons of these two protocols and wanted to write one that is comprehensive and impartial. (Well, as impartial as I and my reviewers can make it ð.) I was inspired by the release of conn
Apollo Client ã¯è¤é Apollo Client ãåãã¦ããã±ã¼ã¹ ä¸ä¼.com ã« Apollo Client ã¯å¿ è¦ãªããããããªã ã§ã¯ä½ã使ãã°ããã®ï¼ è¤éãªã¢ããªã±ã¼ã·ã§ã³ã«ã¯ Apollo ã使ãã°ããï¼ ããä¸ã¤ã®ãªãããªã¯ã©ã¤ã¢ã³ããRelay ã®è©± çµå±ãä½ã使ãã°ããã®ã ãã®è¨äºã¯ä¸ä¼ à åºå館 Frontend Meetup ã§ã話ããå 容ãããã°ã«ã¾ã¨ãããã®ã§ãã user-first.ikyu.co.jp speakerdeck.com GraphQL ã¯ã©ã¤ã¢ã³ãã¨èãã¦ä¸çªã«æãæµ®ãã¶ã©ã¤ãã©ãªã¯ä½ã§ããããï¼ å¤ãã®æ¹ã«ã¨ã£ã¦ã¯ Apollo Client ã§ã¯ãªããã¨æãã¾ããnpm trends ãè¦ã¦ã Apollo Client ã®ãã¦ã³ãã¼ãæ°ã¯ urql ã relay ãªã©ã»ãã®ã¯ã©ã¤ã¢ã³ãã¨æ¯ã¹å§åçã§ãã å®éãä¸ä¼
ã¯ããã« ç¾å¨æºãã£ã¦ããããã¸ã§ã¯ãã®æè¡é¸å®ã§ GraphQL ã使ããã¨ã«ãªãã GraphQL ã¯ã©ã¤ã¢ã³ãã¨ã㦠Apollo Client ãæ¡ç¨ãããã¨ã«ãªãã¾ããã æå㯠GraphQL ãã¯ã©ã¤ã¢ã³ããµã¤ãã§ä¾¿å©ã«ä½¿ããããã«ãã¦ããããã®ãããã®èªèã§ãã¯ã©ã¤ã¢ã³ãå´ã®ç¶æ 管çã«ã¯å¥é Redux ã¨ãå ¥ããã®ããªã¨æã£ã¦ããã®ã§ããã調æ»ã®éç¨ã§ãã¾ãã¾ Apollo Client 㯠Redux ãç½®ãæããã¨ã®è¨äºãè¦ãããã®ã§ Apollo Client ã®ãã£ãã·ã¥ã®ä»çµã¿ã¨ç¶æ 管çã«ã¤ãã¦å°ã調ã¹ã¦ã¿ã¾ããã ãã®è¨äºã§ã¯ä¸è¨ã®ãã¨ã«ã¤ãã¦è§£èª¬ãã¾ãã Apollo Client ã¨ã¯ Apollo Client ã®ãã£ãã·ã¥ã®ä»çµã¿ Reactive variables ãå©ç¨ãããã¼ã«ã«ã®ç¶æ 管çã«ã¤ã㦠ããªãå 容ãããããã«ãªã£ã¦ãã¾ã£ãã®ã§ããã
You donât need anything fancy to load some data from a GraphQL server. All you need for a basic client is a POST request that sends a query down to the server and gets a result back. However, GraphQL queries include a lot of useful information that can be used to make your application faster and more efficient. This is why we have smart client implementations, such as Apollo Client and Relay, that
2åç®ãå ¬éä¸ãªã®ã§ã¿ã¦ãã ããï¼ https://zenn.dev/tatta/books/4e993c596e7dc9 TypeScriptã使ãã¯ããã¦1å¹´ã«ãªãã®ã§ãããã¯ã¨ã³ãã®Webã¢ããªãè¨è¨ããã¨ãã«æ°ãä»ãã¦ãããã¨ãã¾ã¨ãã¾ãããï¼â»ç¤¾å åå¼·ä¼ç¨è³æã®å ¬éçã§ããï¼ TypeScriptã«ã¤ãã¦ã¯ãNext.jsãä¸å¿ã«ããã³ãã¨ã³ãã«é¢ããå ¬éæ å ±ãè±å¯ã§ãã䏿¹ã§ããã¯ã¨ã³ãã«é¢ããå ¬éæ å ±ãå°ãªãã¨æãã¦ãã¾ããï¼ããããç§ãNext.jsããTypeScriptããã¥ã¼ããããã§ããï¼ TypeScript * GraphQL ã¨ããæ§æã¯ä»äºã»è¶£å³ã§æ¡ç¨ããã¦ããæ¹ãå¤ãã®ã§ã¯ãªãã§ããããï¼ ç§ããã®1人ã§ããç§ã®ãããªæ¹ã®ããã«ããããã¯ã¨ã³ãã®è¨è¨ãã©ã¯ãã£ã¹ã«ã¤ãã¦ã¾ã¨ãããã¨æãçãåãã¾ããã æ¬æ¸ãããããå§ããèªè ã«ã¨ã£ã¦ã¯æç§æ¸ã®ããã«ãªãã
èæ¯ GraphQL Code Generator ã使ã㨠GraphQL ã®ã¹ãã¼ããã TypeScript ã®ã³ã¼ããçæãã¦ããåå®å ¨ãè£å®ã®æ©æµãåãã¦å¿«é©ã«éçºãã§ããã®ã§ãããçæãããã³ã¼ãã«å¯¾ãã import ã VSCode ä¸ã§ãªããªãåæ ãããªãã¨ããåé¡ãããã¾ãã çæããã³ã¼ããéãã VSCode èªä½ããªãã¼ãããã°æ£ããèªèãã¦ãããããã»ãã®æ°ç§ã®æéãªã®ã§ããã¾ã§å½±é¿ã¯ãªãã®ã§ããããã®ãã¨ã«ã¤ã㦠README ã«æ¸ãããæ°ããéçºã«é¢ããã¡ã³ãã¼ã«ãgenerated.ts éããï¼ãã¨ããè¬ã®åè¦æ®ºããçºçãã¦ãã¾ããã¨ãåé¡ã§ããã ï¼ç¾å¨ã®ããã¸ã§ã¯ãã§ã¯ monorepo ã§åããã±ã¼ã¸å ã® src/graphql/generated.ts ã«ã³ã¼ãçæãã¦ãã¾ããï¼ å¯¾ç VSCode ã®è¨å®ã® files.watcherExclu
ãµã¼ãã¼ãµã¤ãããã¿ãGraphQL Serverlss Meetup#19 2021/03/31 ã«è¡ããã Serverlss Meetup#19 ã§ä¸è¨ã®ã¿ã¤ãã«ã§ç»å£ãã¦ãã¾ããããµã¼ãã¼ãµã¤ãã®è©±ããããã¨æã£ããã©GraphQLã®è§£æ±ºãã¦ãã話ããããã¨æã£ããã¯ã©ã¤ã¢ã³ãã®äºãããªãã¯ãã£ã¦ãã¾ã£ãã®ã§è¨äºã®ã¿ã¤ãã«ã¯å¤ãã¾ããã 以ä¸å 容ã§ããè¨äºã®æå¾ã«è³æãæ¸ãã«ããã£ã¦åèã«ãªã£ãè³æã®ãªã³ã¯ãç½®ãã¦ã¾ãã GraphQL and me ãã®1å¹´æ¸ããQiitaè¨äº GraphQLã®ç¹å¾´ãåè§£ãã ~API ã¤ã³ã¿ã¼ãã§ã¼ã¹ã»Universal BFFã»API Gateway~ GraphQLã¯ãµã¼ãã¼ãµã¤ãå®è£ ã®ãã¹ããã©ã¯ãã£ã¹ã¨ãªãã GraphQLã®å ¨ä½åã¨WebAppéçºã®ãããã ä»å話ãäº ããããGraphQLã¯ãªãã§ä½ãããã®ããä½ã解決ãããã¨ãã¦
ã©ã³ãã³ã°
ã©ã³ãã³ã°
ã¡ã³ããã³ã¹
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}