{"id":1060,"date":"2023-04-12T20:30:01","date_gmt":"2023-04-12T11:30:01","guid":{"rendered":"http:\/\/edu.ujhb.org\/?p=1060"},"modified":"2023-04-12T20:30:01","modified_gmt":"2023-04-12T11:30:01","slug":"graphql%e5%85%a5%e9%96%80%ef%bc%88%e6%97%a5%e6%9c%ac%e8%aa%9e%e7%89%88%ef%bc%89","status":"publish","type":"post","link":"https:\/\/edu.ujhb.org\/?p=1060","title":{"rendered":"GraphQL\u5165\u9580\uff08\u65e5\u672c\u8a9e\u7248\uff09"},"content":{"rendered":"\n<p>IT\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30d3\u30c7\u30aa\u3092\u3084\u308a\u305f\u3044\u306e\u3067\u3059\u304c\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5fdc\u3058\u3066\u30d3\u30c7\u30aa\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u914d\u7f6e\u3057\u3066\u3044\u305f\u3060\u3051\u307e\u3059\u304b\u3002 GraghQL\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304b\u3089\u59cb\u3081\u307e\u3057\u3087\u3046\u3001\u305d\u3057\u3066\u3042\u306a\u305f\u306f\u79c1\u306b\u30ab\u30d0\u30fc\u3059\u308b\u3082\u306e\u306e\u30ea\u30b9\u30c8\u3092\u4e0e\u3048\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u3082\u3061\u308d\u3093\u3067\u3059\uff01 \u53ef\u80fd\u306aGraphQL\u30d3\u30c7\u30aa\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b0\u30e9\u30d5QL\u306e\u6982\u8981<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b0\u30e9\u30d5QL\u3068\u306f\u4f55\u3067\u3059\u304b?<\/li>\n\n\n\n<li>\u30b0\u30e9\u30d5QL\u306e\u6b74\u53f2\u3068\u5229\u70b9<\/li>\n\n\n\n<li>GraphQL vs. RESTful API<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>\u30b0\u30e9\u30d5 QL \u306e\u57fa\u672c<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GraphQL \u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8: \u30b9\u30ad\u30fc\u30de\u3001\u30af\u30a8\u30ea\u3001\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>\u30b0\u30e9\u30d5 QL \u30af\u30a8\u30ea\u8a00\u8a9e<\/li>\n\n\n\n<li>\u30b0\u30e9\u30d5QL\u306e\u578b\u30b7\u30b9\u30c6\u30e0\u3068\u578b\u5b9a\u7fa9<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>\u30ce\u30fc\u30c9\u3067\u30b0\u30e9\u30d5QL\u3092\u4f7f\u7528\u3057\u307e\u3059.js<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ce\u30fc\u30c9.js\u3068\u30a8\u30af\u30b9\u30d7\u30ec\u30b9.js\u306e\u6982\u8981<\/li>\n\n\n\n<li>GraphQL\u306eJavaScript \u5b9f\u88c5: graphQL.js \u304a\u3088\u3073 express-graphQL<\/li>\n\n\n\n<li>GraphQL \u30b9\u30ad\u30fc\u30de\u3068\u30ea\u30be\u30eb\u30d0\u30fc\u3092\u4f5c\u6210\u3059\u308b<\/li>\n\n\n\n<li>\u30a8\u30af\u30b9\u30d7\u30ec\u30b9.js\u3067\u306e\u30b0\u30e9\u30d5QL\u306e\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>React \u3067 GraphQL \u3092\u4f7f\u7528\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React\u3068Apollo\u306e\u7d39\u4ecb<\/li>\n\n\n\n<li>React \u3067 Apollo Client \u3092\u4f7f\u7528\u3057\u3066 GraphQL API \u3092\u30af\u30a8\u30ea\u3059\u308b<\/li>\n\n\n\n<li>React \u30d5\u30c3\u30af\u3068 GraphQL \u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u53d6\u308a\u8fbc\u307f\u3068\u72b6\u614b\u7ba1\u7406\u3092\u884c\u3046<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>\u9ad8\u5ea6\u306a\u30c6\u30fc\u30de<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GraphQL \u306e\u30a8\u30e9\u30fc\u51e6\u7406\u3068\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5<\/li>\n\n\n\n<li>GraphQL \u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30af\u30a8\u30ea\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b<\/li>\n\n\n\n<li>GraphQL \u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30ad\u30e3\u30c3\u30b7\u30e5\u624b\u6cd5<\/li>\n<\/ul>\n\n\n\n<p>\u4e0a\u8a18\u306f\u5927\u307e\u304b\u306a\u6982\u8981\u306b\u904e\u304e\u305a\u3001\u7279\u5b9a\u306e\u30d3\u30c7\u30aa\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u5185\u5bb9\u306f\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u30aa\u30fc\u30c7\u30a3\u30a8\u30f3\u30b9\u3001\u6642\u9593\u306e\u5236\u7d04\u3001\u304a\u3088\u3073\u305d\u306e\u4ed6\u306e\u8981\u4ef6\u306b\u5fdc\u3058\u3066\u9069\u5207\u306b\u8abf\u6574\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 \u3046\u307e\u304f\u3044\u3051\u3070\u3001\u3053\u306e\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u306f\u3042\u306a\u305f\u306b\u3044\u304f\u3064\u304b\u306e\u30a4\u30f3\u30b9\u30d4\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u4e0e\u3048\u307e\u3057\u305f!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u3068\u306f\u4f55\u304b\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>GraphQL \u306f\u3001API \u958b\u767a\u306e\u305f\u3081\u306e\u30af\u30a8\u30ea\u8a00\u8a9e\u304a\u3088\u3073\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3059\u3002 2012\u5e74\u304b\u3089Facebook\u306b\u3088\u3063\u3066\u5185\u90e8\u7684\u306b\u958b\u767a\u3055\u308c\u30012015\u5e74\u306b\u6700\u521d\u306b\u516c\u958b\u3055\u308c\u30012018\u5e74\u306b\u6b63\u5f0f\u306bLinux Foundation\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>GraphQL \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u5f93\u6765\u306e REST API \u306b\u3042\u308b\u56fa\u5b9a\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u8fd4\u3059\u3053\u3068\u306a\u304f\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u6b63\u78ba\u306b\u6307\u5b9a\u3057\u3001\u6307\u5b9a\u3055\u308c\u305f\u8981\u4ef6\u306b\u5bfe\u5fdc\u3059\u308b\u30c7\u30fc\u30bf\u3092\u8fd4\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u3064\u307e\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u8907\u6570\u306e\u8981\u6c42\u9593\u3067\u9001\u4fe1\u3059\u308b\u30c7\u30fc\u30bf\u304c\u591a\u3059\u304e\u305f\u308a\u5c11\u306a\u3059\u304e\u305f\u308a\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30aa\u30f3\u30c7\u30de\u30f3\u30c9\u3067\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u4fdd\u5b88\u6027\u304c\u5411\u4e0a\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u9593\u3067\u8ee2\u9001\u3055\u308c\u308b\u30c7\u30fc\u30bf\u306e\u91cf\u3092\u5927\u5e45\u306b\u524a\u6e1b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL\u306e\u30b3\u30a2\u30a2\u30a4\u30c7\u30a2\u306f\u3001\u300c\u30b9\u30ad\u30fc\u30de\u300d\u3068\u547c\u3070\u308c\u308b\u578b\u4ed8\u304d\u30c7\u30fc\u30bf\u30b9\u30ad\u30fc\u30de\u3068\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u30b9\u30ad\u30fc\u30de\u306f\u3001API \u3067\u4f7f\u7528\u3067\u304d\u308b\u578b\u3001\u30d5\u30a3\u30fc\u30eb\u30c9\u3001\u64cd\u4f5c\u3001\u304a\u3088\u3073\u305d\u308c\u3089\u306e\u9593\u306e\u95a2\u4fc2\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30b9\u30ad\u30fc\u30de\u3092\u4f7f\u7528\u3057\u3066\u30af\u30a8\u30ea\u8981\u6c42\u3092\u4f5c\u6210\u3057\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002 GraphQL \u30b5\u30fc\u30d0\u30fc\u306f\u30af\u30a8\u30ea\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u53d7\u4fe1\u3057\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u5bfe\u5fdc\u3059\u308b\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30af\u30a8\u30ea\u6a5f\u80fd\u3092\u63d0\u4f9b\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001GraphQL \u306b\u306f\u30c7\u30fc\u30bf\u3092\u5909\u66f4\u3059\u308b\u6a5f\u80fd\u3082\u3042\u308a\u307e\u3059\u3002 \u5909\u66f4\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30b5\u30fc\u30d0\u30fc\u4e0a\u306e\u30c7\u30fc\u30bf\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002 \u30af\u30a8\u30ea\u3068\u540c\u69d8\u306b\u3001\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u30b9\u30ad\u30fc\u30de\u3092\u4f7f\u7528\u3057\u3066\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u306f\u30af\u30a8\u30ea\u8a00\u8a9e\u3067\u3042\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3082\u3042\u308a\u307e\u3059\u3002 GraphQL \u30b5\u30fc\u30d0\u30fc\u3067\u306f\u3001\u30b9\u30ad\u30fc\u30de\u3092\u4f7f\u7528\u3057\u3066\u30af\u30a8\u30ea\u30ea\u30af\u30a8\u30b9\u30c8\u3068\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u30c7\u30fc\u30bf\u3092\u691c\u8a3c\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u30c7\u30fc\u30bf \u30bd\u30fc\u30b9\u9593\u306e\u8907\u96d1\u306a\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u306e\u51e6\u7406\u3001\u8907\u6570\u306e\u30c7\u30fc\u30bf \u30bd\u30fc\u30b9\u304b\u3089\u306e\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u3068\u96c6\u8a08\u3001\u30a8\u30e9\u30fc\u3068\u4f8b\u5916\u306e\u51e6\u7406\u3092\u884c\u3046\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u8981\u7d04\u3059\u308b\u3068\u3001GraphQL\u306f\u3001API\u958b\u767a\u306e\u305f\u3081\u306e\u67d4\u8edf\u3067\u52b9\u7387\u7684\u3001\u62e1\u5f35\u53ef\u80fd\u3067\u578b\u6307\u5b9a\u3055\u308c\u305f\u30af\u30a8\u30ea\u8a00\u8a9e\u304a\u3088\u3073\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30aa\u30f3\u30c7\u30de\u30f3\u30c9\u3067\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3067\u304d\u3001\u5f37\u529b\u306a\u30c7\u30fc\u30bf\u51e6\u7406\u3068\u30a8\u30e9\u30fc\u51e6\u7406\u3092\u63d0\u4f9b\u3057\u306a\u304c\u3089\u3001\u30c7\u30fc\u30bf\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306e\u6b74\u53f2\u3068\u5229\u70b9\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL\u306e\u6b74\u53f2\u306f\u3001Facebook\u304c\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea\u306eAPI\u3092\u518d\u8a2d\u8a08\u3057\u3066\u3044\u305f2012\u5e74\u306b\u3055\u304b\u306e\u307c\u308a\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u30b5\u30fc\u30d0\u30fc\u306b\u8907\u6570\u306e\u8981\u6c42\u3092\u884c\u3046\u5fc5\u8981\u304c\u3042\u308b\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u904e\u5270\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3001\u30c7\u30fc\u30bf\u69cb\u9020\u306e\u5909\u66f4\u304c\u8907\u6570\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u306a\u3069\u3001\u8907\u6570\u306e\u554f\u984c\u306b\u76f4\u9762\u3057\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u554f\u984c\u306b\u5bfe\u51e6\u3059\u308b\u305f\u3081\u306b\u3001Facebook\u306fGraphQL\u3068\u547c\u3070\u308c\u308b\u65b0\u3057\u3044API\u30af\u30a8\u30ea\u8a00\u8a9e\u3068\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 GraphQL\u306f2015\u5e74\u306b\u6700\u521d\u306b\u516c\u958b\u3055\u308c\u30012018\u5e74\u306b\u6b63\u5f0f\u306bLinux Foundation\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>GraphQL\u306e\u4e3b\u306a\u5229\u70b9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u67d4\u8edf\u6027\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3:GraphQL\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u7279\u5b9a\u306e\u30cb\u30fc\u30ba\u306b\u57fa\u3065\u3044\u3066\u30c7\u30fc\u30bf\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u8907\u6570\u306e\u8981\u6c42\u9593\u3067\u901a\u4fe1\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u5fc5\u8981\u306a\u6700\u5c0f\u9650\u306e\u30c7\u30fc\u30bf\u3092\u8981\u6c42\u3067\u304d\u307e\u3059\u3002 \u3055\u3089\u306b\u3001GraphQL\u306e\u30b9\u30ad\u30fc\u30de\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u60aa\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u3053\u3068\u306a\u304f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30cb\u30fc\u30ba\u306b\u5fdc\u3058\u3066\u5909\u66f4\u304a\u3088\u3073\u62e1\u5f35\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u306e\u524a\u6e1b:GraphQL\u306e\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u5f93\u6765\u306eREST API\u306b\u3042\u308b\u56fa\u5b9a\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u8fd4\u3059\u3053\u3068\u306a\u304f\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u6b63\u78ba\u306b\u6307\u5b9a\u3057\u3001\u6307\u5b9a\u3055\u308c\u305f\u8981\u4ef6\u306b\u5bfe\u5fdc\u3059\u308b\u30c7\u30fc\u30bf\u3092\u8fd4\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u3064\u307e\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u8907\u6570\u306e\u8981\u6c42\u9593\u3067\u9001\u4fe1\u3059\u308b\u30c7\u30fc\u30bf\u304c\u591a\u3059\u304e\u305f\u308a\u5c11\u306a\u3059\u304e\u305f\u308a\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30aa\u30f3\u30c7\u30de\u30f3\u30c9\u3067\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u4fdd\u5b88\u6027\u304c\u5411\u4e0a\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u9593\u3067\u8ee2\u9001\u3055\u308c\u308b\u30c7\u30fc\u30bf\u306e\u91cf\u3092\u5927\u5e45\u306b\u524a\u6e1b\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u578b\u4ed8\u304d\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb: GraphQL \u306f\u30b9\u30ad\u30fc\u30de\u3092\u4f7f\u7528\u3057\u3066 API \u306e\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3068\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30b9\u30ad\u30fc\u30de\u306b\u306f\u3001\u578b\u3001\u30d5\u30a3\u30fc\u30eb\u30c9\u3001\u304a\u3088\u3073\u64cd\u4f5c\u306e\u5b9a\u7fa9\u3068\u3001\u305d\u308c\u3089\u306e\u9593\u306e\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306fAPI\u306e\u69cb\u9020\u3068\u30c7\u30fc\u30bf\u3092\u7406\u89e3\u3057\u3084\u3059\u304f\u306a\u308a\u3001API\u9593\u3067\u306e\u30c7\u30fc\u30bf\u5171\u6709\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5358\u4e00\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8: GraphQL \u3067\u306f\u3059\u3079\u3066\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b 1 \u3064\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u307f\u304c\u5fc5\u8981\u3067\u3059\u304c\u3001\u5f93\u6765\u306e REST API \u3067\u306f\u8907\u6570\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u304c\u5fc5\u8981\u306b\u306a\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306f 1 \u3064\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u96c6\u4e2d\u3067\u304d\u308b\u305f\u3081\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fdd\u5b88\u3068\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0:\u958b\u767a\u8005\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u304a\u3051\u308bGraphQL\u306e\u6025\u901f\u306a\u6210\u9577\u306b\u3088\u308a\u3001\u73fe\u5728\u3067\u306f\u591a\u304f\u306e\u958b\u767a\u30c4\u30fc\u30eb\u3068\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u306f\u3001\u958b\u767a\u8005\u304c GraphQL API \u3092\u3088\u308a\u8fc5\u901f\u306b\u69cb\u7bc9\u3057\u3066\u30c6\u30b9\u30c8\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u3001\u65e2\u5b58\u306e\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u30b9\u30bf\u30c3\u30af\u3068\u7c21\u5358\u306b\u7d71\u5408\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u8981\u7d04\u3059\u308b\u3068\u3001GraphQL\u306f\u3001\u67d4\u8edf\u6027\u304c\u3042\u308a\u3001\u62e1\u5f35\u53ef\u80fd\u3067\u3001\u578b\u6307\u5b9a\u3055\u308c\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u52b9\u7387\u306e\u9ad8\u3044API\u30af\u30a8\u30ea\u8a00\u8a9e\u304a\u3088\u3073\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3042\u308a\u3001\u958b\u767a\u8005\u304c\u6700\u65b0\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u3068\u4fdd\u5b88\u3092\u5bb9\u6613\u306b\u3059\u308b\u591a\u304f\u306e\u5229\u70b9\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u3068RESTful API\u306e\u6bd4\u8f03\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL API \u3068 RESTful API \u306f\u3069\u3061\u3089\u3082\u3001\u6700\u65b0\u306e\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u4e00\u822c\u7684\u306a API \u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002 \u3069\u3061\u3089\u3082\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\/\u30b5\u30fc\u30d0\u30fc\u901a\u4fe1\u306e\u51e6\u7406\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u304c\u3001\u30c7\u30fc\u30bf\u306e\u64cd\u4f5c\u65b9\u6cd5\u3068 API \u306e\u69cb\u7bc9\u65b9\u6cd5\u306b\u306f\u591a\u304f\u306e\u9055\u3044\u304c\u3042\u308a\u307e\u3059\u3002 GraphQL \u3068 RESTful API \u306e\u6bd4\u8f03\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u65b9\u6cd5: RESTful API \u306f\u3001HTTP \u30e1\u30bd\u30c3\u30c9 (GET\u3001POST\u3001PUT\u3001DELETE) \u3068 URL \u30d1\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30ea\u30bd\u30fc\u30b9\u3092\u516c\u958b\u3057\u3001HTTP \u72b6\u614b\u30b3\u30fc\u30c9\u3068\u5fdc\u7b54\u672c\u6587\u3092\u4f7f\u7528\u3057\u3066\u7d50\u679c\u3092\u8868\u3057\u307e\u3059\u3002 GraphQL \u306f\u30ab\u30b9\u30bf\u30e0\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u30af\u30a8\u30ea\u30b9\u30c6\u30fc\u30c8\u30e1\u30f3\u30c8\u306b\u4e00\u81f4\u3059\u308b\u7d50\u679c\u3092\u8fd4\u3057\u307e\u3059\u3002 \u30ea\u30bd\u30fc\u30b9\u5168\u4f53\u3092\u8fd4\u3059\u4ee3\u308f\u308a\u306b\u3001GraphQL \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u53d6\u5f97\u3059\u308b\u7279\u5b9a\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u8981\u6c42\u3068\u5fdc\u7b54: RESTful API \u3067\u306f\u3001\u5404\u30ea\u30bd\u30fc\u30b9\u306b\u7279\u5b9a\u306e URI \u304c\u3042\u308a\u3001\u8981\u6c42\u306b\u5bfe\u3059\u308b\u5fdc\u7b54\u306f\u5e38\u306b\u540c\u3058\u3067\u3059\u3002 GraphQL \u306f\u3001\u5358\u4e00\u306e URI \u3068\u30ab\u30b9\u30bf\u30e0\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u3002 GraphQL \u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u30dc\u30c7\u30a3\u306f\u30af\u30a8\u30ea\u306b\u4e00\u81f4\u3059\u308b JSON \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3042\u308b\u305f\u3081\u3001\u5404\u30af\u30a8\u30ea\u306f\u7570\u306a\u308b\u30ec\u30b9\u30dd\u30f3\u30b9\u30dc\u30c7\u30a3\u3092\u8fd4\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9: RESTful API \u306e\u30ea\u30bd\u30fc\u30b9\u304c\u516c\u958b\u3055\u308c\u308b\u65b9\u6cd5\u304c\u539f\u56e0\u3067\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u8907\u6570\u306e\u8981\u6c42\u3092\u9001\u4fe1\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u8ffd\u52a0\u306e\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3068\u5fdc\u7b54\u6642\u9593\u306e\u9045\u5ef6\u304c\u767a\u751f\u3057\u307e\u3059\u3002 GraphQL\u306e\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u6b63\u78ba\u306b\u6307\u5b9a\u3067\u304d\u308b\u305f\u3081\u3001\u4e0d\u8981\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3068\u5fdc\u7b54\u6642\u9593\u304c\u77ed\u7e2e\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5: RESTful API \u306e\u30ea\u30bd\u30fc\u30b9\u304c\u516c\u958b\u3055\u308c\u308b\u65b9\u6cd5\u306b\u3088\u308a\u3001HTTP \u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4f7f\u7528\u3057\u3066\u5fdc\u7b54\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3067\u304d\u307e\u3059\u3002 GraphQL \u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u52d5\u7684\u306a\u6027\u8cea\u306b\u3088\u308a\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u306f\u3088\u308a\u56f0\u96e3\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u306f RESTful API \u3068\u540c\u69d8\u306b ETag \u307e\u305f\u306f\u6700\u7d42\u5909\u66f4\u30d8\u30c3\u30c0\u30fc\u3092\u4f7f\u7528\u3057\u3066\u6700\u9069\u5316\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u67d4\u8edf\u6027: RESTful API \u304c\u30ea\u30bd\u30fc\u30b9\u3092\u516c\u958b\u3059\u308b\u65b9\u6cd5\u306f\u6bd4\u8f03\u7684\u9759\u7684\u3067\u3042\u308b\u305f\u3081\u3001\u30c7\u30fc\u30bf \u30e2\u30c7\u30eb\u3084\u30c7\u30fc\u30bf\u8981\u6c42\u306e\u5909\u66f4\u306b\u306f\u9069\u3057\u3066\u3044\u307e\u305b\u3093\u3002 GraphQL \u306e\u30af\u30a8\u30ea\u8a00\u8a9e\u3068\u578b\u30b7\u30b9\u30c6\u30e0\u306b\u3088\u308a\u3001\u30c7\u30fc\u30bf \u30e2\u30c7\u30eb\u3068\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u3088\u308a\u67d4\u8edf\u306b\u5b9a\u7fa9\u3067\u304d\u3001\u5909\u66f4\u306b\u7c21\u5358\u306b\u9069\u5fdc\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c4\u30fc\u30eb\u3068\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0: RESTful API \u306f\u3001Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u6700\u3082\u5e83\u304f\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b API \u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u306e 1 \u3064\u3067\u3042\u308b\u305f\u3081\u3001RESTful API \u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u30c4\u30fc\u30eb\u3068\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306f\u591a\u6570\u3042\u308a\u307e\u3059\u3002 GraphQL\u306e\u6025\u901f\u306a\u6210\u9577\u306f\u3001\u958b\u767a\u8005\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3067\u591a\u304f\u306e\u652f\u6301\u3092\u5f97\u3066\u304a\u308a\u3001\u958b\u767a\u8005\u304cGraphQL API\u3092\u69cb\u7bc9\u304a\u3088\u3073\u30c6\u30b9\u30c8\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u591a\u304f\u306e\u30c4\u30fc\u30eb\u3084\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3082\u7372\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u5168\u4f53\u3068\u3057\u3066\u3001GraphQL API \u3068 RESTful API \u306e\u4e21\u65b9\u306b\u306f\u3001\u305d\u308c\u305e\u308c\u72ec\u81ea\u306e\u5229\u70b9\u3068\u5236\u9650\u304c\u3042\u308a\u307e\u3059\u3002 RESTful API \u306f\u3001\u7279\u306b Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u5e83\u304f\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001\u3044\u304f\u3064\u304b\u306e\u70b9\u3067\u3088\u308a\u30b7\u30f3\u30d7\u30eb\u3067\u4f7f\u3044\u3084\u3059\u3044\u3067\u3059\u3002 GraphQL \u306f\u3088\u308a\u67d4\u8edf\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u3067\u3042\u308a\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u30c7\u30fc\u30bf\u30af\u30a8\u30ea\u3084\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027\u304c\u5fc5\u8981\u306a\u5834\u5408\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002 \u3069\u306e API \u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3092\u9078\u629e\u3059\u308b\u304b\u306f\u3001\u7279\u5b9a\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30cb\u30fc\u30ba\u3068\u5236\u9650\u3092\u8003\u616e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u3068gRPC\u306e\u6bd4\u8f03\u3092\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u3068 gRPC \u306f\u3069\u3061\u3089\u3082\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b API \u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3067\u3042\u308a\u3001\u30c7\u30fc\u30bf\u306e\u51e6\u7406\u65b9\u6cd5\u3068 API \u306e\u69cb\u7bc9\u65b9\u6cd5\u306b\u306f\u591a\u304f\u306e\u9055\u3044\u304c\u3042\u308a\u307e\u3059\u3002 GraphQL \u3068 gRPC \u306e\u6bd4\u8f03\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u901a\u4fe1\u30d7\u30ed\u30c8\u30b3\u30eb: GraphQL \u306f\u901a\u4fe1\u306b HTTP \u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u4f7f\u7528\u3057\u3001gRPC \u306f\u901a\u4fe1\u306b\u30d7\u30ed\u30c8\u30b3\u30eb\u30d0\u30c3\u30d5\u30a1\u306b\u57fa\u3065\u304f\u30d0\u30a4\u30ca\u30ea\u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002 \u30d7\u30ed\u30c8\u30b3\u30eb\u30d0\u30c3\u30d5\u30a1\u306f\u30d0\u30a4\u30ca\u30ea\u30d7\u30ed\u30c8\u30b3\u30eb\u3067\u3042\u308b\u305f\u3081\u3001JSON\u306e\u3088\u3046\u306a\u30c6\u30ad\u30b9\u30c8\u89e3\u6790\u3092\u5fc5\u8981\u3068\u305b\u305a\u306b\u3001\u30c7\u30fc\u30bf\u3092\u3088\u308a\u9ad8\u901f\u306b\u30b7\u30ea\u30a2\u30eb\u5316\u304a\u3088\u3073\u9006\u30b7\u30ea\u30a2\u30eb\u5316\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001gRPC \u306f\u3001\u7279\u306b\u9ad8\u8ca0\u8377\u6642\u306b\u3001\u8981\u6c42\u3068\u5fdc\u7b54\u3092\u3088\u308a\u9ad8\u901f\u306b\u51e6\u7406\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u5f62\u5f0f: GraphQL \u306f JSON \u306e\u3088\u3046\u306a\u30af\u30a8\u30ea\u8a00\u8a9e\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u30ea\u30af\u30a8\u30b9\u30c8\u304a\u3088\u3073\u8fd4\u3057\u3001gRPC \u306f\u30d7\u30ed\u30c8\u30b3\u30eb\u30d0\u30c3\u30d5\u30a1\u3092\u4f7f\u7528\u3057\u3066\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3068\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30d7\u30ed\u30c8\u30b3\u30eb \u30d0\u30c3\u30d5\u30a1\u30fc\u3067\u306f\u53b3\u5bc6\u306a\u578b\u6307\u5b9a\u3068\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u304c\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001gRPC \u306f\u30c7\u30fc\u30bf \u30e2\u30c7\u30eb\u3068 API \u306e\u9032\u5316\u3092\u3088\u308a\u9069\u5207\u306b\u30b5\u30dd\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b5\u30fc\u30d3\u30b9\u5b9a\u7fa9:GraphQL\u3067\u306f\u3001\u5404\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u72ec\u81ea\u306e\u30d1\u30fc\u30b5\u30fc\u304c\u3042\u308a\u3001\u5404\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u30d1\u30fc\u30b5\u30fc\u306f\u958b\u767a\u8005\u304c\u81ea\u7531\u306b\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 gRPC \u3067\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u5b9a\u7fa9\u306f .proto \u30d5\u30a1\u30a4\u30eb\u3067\u5b9a\u7fa9\u3055\u308c\u3001\u30b5\u30fc\u30d3\u30b9\u3068\u30e1\u30c3\u30bb\u30fc\u30b8\u3001\u304a\u3088\u3073\u30b5\u30fc\u30d3\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3068\u8981\u6c42\/\u5fdc\u7b54\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9: gRPC \u306f\u30d0\u30a4\u30ca\u30ea \u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001\u30c7\u30fc\u30bf\u306e\u30b7\u30ea\u30a2\u30eb\u5316\u3068\u9006\u30b7\u30ea\u30a2\u30eb\u5316\u304c\u9ad8\u901f\u306b\u306a\u308a\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002 gRPC \u306f\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u304c\u540c\u6642\u306b\u8907\u6570\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u53d7\u4fe1\u3067\u304d\u308b\u305f\u3081\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u3055\u3089\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u8a00\u8a9e\u30b5\u30dd\u30fc\u30c8: gRPC \u306f\u30d7\u30ed\u30c8\u30b3\u30eb \u30d0\u30c3\u30d5\u30a1\u30fc\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001Java\u3001C++\u3001Go \u306a\u3069\u3092\u542b\u3080\u8907\u6570\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u30b5\u30dd\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002 GraphQL \u306f\u6a19\u6e96\u306e HTTP \u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u4f7f\u7528\u3057\u3001JSON \u5f62\u5f0f\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u305f\u3081\u3001HTTP \u304a\u3088\u3073 JSON \u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u4efb\u610f\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u51e6\u7406: GraphQL \u3067\u306f\u3001\u30af\u30a8\u30ea\u306b\u30a8\u30e9\u30fc\u304c\u3042\u308b\u5834\u5408\u3001\u30a8\u30e9\u30fc\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u542b\u3080\u30a8\u30e9\u30fc\u5fdc\u7b54\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002 gRPC \u3067\u306f\u3001\u30b5\u30fc\u30d3\u30b9 \u30e1\u30bd\u30c3\u30c9\u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u3001\u30a8\u30e9\u30fc\u72b6\u614b\u30b3\u30fc\u30c9\u3068\u30a8\u30e9\u30fc \u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u5168\u4f53\u3068\u3057\u3066\u3001GraphQL \u3068 gRPC \u306e\u4e21\u65b9\u306b\u72ec\u81ea\u306e\u5229\u70b9\u3068\u5236\u9650\u304c\u3042\u308a\u307e\u3059\u3002 gRPC \u306f\u3001\u9ad8\u3044\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u306e\u8981\u4ef6\u3092\u6301\u3064\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002 GraphQL \u306f\u3088\u308a\u67d4\u8edf\u6027\u304c\u9ad8\u304f\u3001\u8907\u96d1\u306a\u30af\u30a8\u30ea\u3084\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3092\u3088\u308a\u9069\u5207\u306b\u51e6\u7406\u3067\u304d\u3001\u3055\u307e\u3056\u307e\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002 \u3069\u306e API \u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3092\u9078\u629e\u3059\u308b\u304b\u306f\u3001\u7279\u5b9a\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30cb\u30fc\u30ba\u3068\u5236\u9650\u3092\u8003\u616e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044:\u30b9\u30ad\u30fc\u30de<\/p>\n\n\n\n<p>GraphQL \u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306e 1 \u3064\u306f\u30b9\u30ad\u30fc\u30de\u3067\u3059\u3002 \u30b9\u30ad\u30fc\u30de\u306f\u3001GraphQL \u30b5\u30fc\u30d3\u30b9\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u308b\u30bf\u30a4\u30d7\u3001\u30af\u30a8\u30ea\u3001\u5909\u66f4\u3001\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u5b9f\u884c\u3067\u304d\u308b\u3059\u3079\u3066\u306e\u64cd\u4f5c\u3068\u3001\u8fd4\u3059\u3053\u3068\u304c\u3067\u304d\u308b\u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u304c\u8a18\u8ff0\u3055\u308c\u307e\u3059\u3002 \u30b9\u30ad\u30fc\u30de\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u306e\u30b3\u30f3\u30c8\u30e9\u30af\u30c8\u3068\u3057\u3066\u6a5f\u80fd\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u306b\u5171\u901a\u8a00\u8a9e\u3068\u57fa\u76e4\u3092\u63d0\u4f9b\u3059\u308b\u305f\u3081\u3001GraphQL\u306e\u4e2d\u6838\u3067\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u3067\u306f\u3001\u30b9\u30ad\u30fc\u30de\u306f\u578b\u5b9a\u7fa9\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002 \u578b\u5b9a\u7fa9\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u304c\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u3059\u3079\u3066\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3001\u30b9\u30ab\u30e9\u30fc\u578b\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u578b\u3001\u304a\u3088\u3073\u5171\u7528\u4f53\u578b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u306f\u7279\u5b9a\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3068\u578b\u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53c2\u7167\u3057\u3001\u30b9\u30ab\u30e9\u30fc\u578b\u306f\u6587\u5b57\u5217\u3084\u6570\u5024\u306a\u3069\u306e\u57fa\u672c\u578b\u3092\u53c2\u7167\u3057\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u578b\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u306e\u5171\u6709\u7279\u6027\u3068\u30e1\u30bd\u30c3\u30c9\u3092\u53c2\u7167\u3057\u3001\u5171\u7528\u4f53\u578b\u306f\u8907\u6570\u306e\u53ef\u80fd\u306a\u578b\u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3092\u53c2\u7167\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30ad\u30fc\u30de\u3067\u306f\u3001\u30af\u30a8\u30ea\u3068\u5909\u66f4\u306e\u7a2e\u985e\u3082\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30af\u30a8\u30ea\u306e\u7a2e\u985e\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u4f7f\u7528\u3067\u304d\u308b\u30af\u30a8\u30ea\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u5909\u66f4\u30bf\u30a4\u30d7\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u4f7f\u7528\u3067\u304d\u308b\u5909\u66f4\u64cd\u4f5c (\u4f5c\u6210\u3001\u66f4\u65b0\u3001\u524a\u9664\u306a\u3069) \u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u30c7\u30fc\u30bf\u66f4\u65b0\u3092\u53d7\u4fe1\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30ad\u30fc\u30de\u306f\u3001GraphQL \u30b9\u30ad\u30fc\u30de\u5b9a\u7fa9\u8a00\u8a9e (SDL) \u307e\u305f\u306f\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u4f7f\u7528\u3057\u3066\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 SDL \u306f GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u8a00\u8a9e\u3067\u3042\u308a\u3001\u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u30b7\u30f3\u30d7\u30eb\u3067\u5f37\u529b\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0 \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u5b9a\u7fa9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u4f7f\u7528\u3057\u3066\u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30ad\u30fc\u30de\u304c\u5b9a\u7fa9\u3055\u308c\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u305d\u306e\u30b9\u30ad\u30fc\u30de\u3092\u4f7f\u7528\u3057\u3066\u3001\u30af\u30a8\u30ea\u3001\u5909\u66f4\u3001\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30af\u30a8\u30ea\u64cd\u4f5c\u3092\u901a\u3058\u3066\u30c7\u30fc\u30bf\u3092\u8981\u6c42\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u30af\u30a8\u30ea\u64cd\u4f5c\u3092\u89e3\u6790\u3057\u3066\u5b9f\u884c\u30d7\u30e9\u30f3\u306b\u5909\u63db\u3057\u3001\u6700\u5f8c\u306b\u5b9f\u884c\u30d7\u30e9\u30f3\u306b\u3088\u3063\u3066\u30af\u30a8\u30ea\u7d50\u679c\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u30b9\u30ad\u30fc\u30de\u3092\u4f7f\u7528\u3057\u3066\u3001\u30af\u30a8\u30ea\u306e\u6b63\u78ba\u6027\u3068\u6709\u52b9\u6027\u3092\u691c\u8a3c\u3057\u3001\u30b9\u30ad\u30fc\u30de\u3067\u5b9a\u7fa9\u3055\u308c\u305f\u5236\u7d04\u306b\u5f93\u3063\u3066\u30af\u30a8\u30ea\u7d50\u679c\u3092\u51e6\u7406\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u306b\u3001\u30b9\u30ad\u30fc\u30de\u306f GraphQL \u306e\u30b3\u30a2\u6982\u5ff5\u306e 1 \u3064\u3067\u3042\u308a\u3001GraphQL \u30b5\u30fc\u30d3\u30b9\u306e\u30bf\u30a4\u30d7\u3001\u30af\u30a8\u30ea\u3001\u5909\u66f4\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u306b\u5171\u901a\u8a00\u8a9e\u3068\u57fa\u76e4\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u30b9\u30ad\u30fc\u30de\u3092\u901a\u3058\u3066\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u4f7f\u7528\u53ef\u80fd\u306a\u64cd\u4f5c\u3068\u30c7\u30fc\u30bf\u578b\u3092\u7406\u89e3\u3057\u3001\u30af\u30a8\u30ea\u64cd\u4f5c\u3092\u30b5\u30fc\u30d0\u30fc\u3068\u5bfe\u8a71\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044:\u30af\u30a8\u30ea<\/p>\n\n\n\n<p>GraphQL \u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306e 1 \u3064\u306f\u30af\u30a8\u30ea\u3067\u3059\u3002 \u30af\u30a8\u30ea\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30c7\u30fc\u30bf\u3092\u8981\u6c42\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3068\u8fd4\u3059\u5fc5\u8981\u306e\u3042\u308b\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u6b63\u78ba\u306b\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u3067\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3057\u3066\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002 Query \u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30d5\u30a7\u30c3\u30c1\u3059\u308b\u30c7\u30fc\u30bf\u3092\u8a18\u8ff0\u3059\u308b\u30d5\u30a3\u30fc\u30eb\u30c9\u3068\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u5358\u4e00\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u307e\u305f\u306f\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8981\u6c42\u3057\u3066\u3001\u305d\u308c\u3089\u306b\u95a2\u9023\u4ed8\u3051\u3089\u308c\u3066\u3044\u308b\u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002 GraphQL \u306e\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u8fd4\u3059\u5fc5\u8981\u304c\u3042\u308b\u30c7\u30fc\u30bf\u3092\u6b63\u78ba\u306b\u6307\u5b9a\u3067\u304d\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u8981\u6c42\u3055\u308c\u305f\u30c7\u30fc\u30bf\u306e\u307f\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30af\u30a8\u30ea\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30b5\u30fc\u30d0\u30fc\u3068\u5bfe\u8a71\u3057\u3001\u30c7\u30fc\u30bf\u3092\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u308b\u305f\u3081\u3001GraphQL \u306e\u30b3\u30a2\u6982\u5ff5\u306e 1 \u3064\u3067\u3059\u3002 Query \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u6307\u5b9a\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u8981\u6c42\u3067\u304d\u308b\u305f\u3081\u3001\u5f93\u6765\u306e RESTful API \u3067\u898b\u3089\u308c\u308b\u8981\u6c42\u306e\u904e\u4e0d\u8db3\u306e\u554f\u984c\u3092\u56de\u907f\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u306e\u30af\u30a8\u30ea\u3067\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30af\u30a8\u30ea\u4e2d\u306b\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f Query \u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u6e21\u3057\u3066\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u3055\u3089\u306b\u30d5\u30a3\u30eb\u30bf\u30fc\u51e6\u7406\u3067\u304d\u307e\u3059\u3002 \u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u306b\u306f\u3001\u6587\u5b57\u5217\u3084\u6570\u5024\u306a\u3069\u306e\u30b9\u30ab\u30e9\u30fc\u578b\u3001\u307e\u305f\u306f\u65e5\u4ed8\u7bc4\u56f2\u3084\u4f4f\u6240\u60c5\u5831\u306a\u3069\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u3067\u306f\u3001\u30af\u30a8\u30ea\u306e\u5b9f\u884c\u306f\u30b5\u30fc\u30d0\u30fc\u306b\u3088\u3063\u3066\u51e6\u7406\u3055\u308c\u307e\u3059\u3002 \u30b5\u30fc\u30d0\u30fc\u306f Query \u3092\u89e3\u6790\u3057\u3066\u5b9f\u884c\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u8981\u6c42\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u3002 \u30b5\u30fc\u30d0\u30fc\u306f\u3001Query \u3067\u5b9a\u7fa9\u3055\u308c\u305f\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3068\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u57fa\u3065\u3044\u3066\u30af\u30a8\u30ea \u30d7\u30ed\u30bb\u30b9\u3092\u6700\u9069\u5316\u3057\u3001\u52b9\u7387\u7684\u306a\u30af\u30a8\u30ea\u5b9f\u884c\u3092\u78ba\u4fdd\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5168\u4f53\u3068\u3057\u3066\u3001GraphQL \u306e\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u6b63\u78ba\u306b\u6307\u5b9a\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002 \u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30b5\u30fc\u30d0\u30fc\u3068\u5bfe\u8a71\u3057\u3001\u30cb\u30fc\u30ba\u3092\u6e80\u305f\u3059\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002 \u30af\u30a8\u30ea\u306f GraphQL \u306e\u30b3\u30a2\u6982\u5ff5\u306e 1 \u3064\u3067\u3042\u308a\u3001GraphQL \u3092\u52b9\u7387\u7684\u3067\u62e1\u5f35\u53ef\u80fd\u3067\u67d4\u8edf\u306a\u30c7\u30fc\u30bf\u30af\u30a8\u30ea\u8a00\u8a9e\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u3067\u3042\u308b\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306e 1 \u3064\u306f\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30c7\u30fc\u30bf\u3092\u5909\u66f4\u307e\u305f\u306f\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u30c7\u30fc\u30bf\u306e\u4f5c\u6210\u3001\u66f4\u65b0\u3001\u524a\u9664\u3001\u305d\u306e\u4ed6\u306e\u30ab\u30b9\u30bf\u30e0\u64cd\u4f5c\u306e\u5b9f\u884c\u306a\u3069\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u3055\u307e\u3056\u307e\u306a\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u3067\u306f\u3001\u64cd\u4f5c\u306e\u7a2e\u985e\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u304c\u5b9f\u88c5\u3055\u308c\u307e\u3059\u3002 \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306b\u306f\u3001\u64cd\u4f5c\u540d\u3001\u5165\u529b\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3001\u623b\u308a\u5024\u306e\u578b\u3001\u304a\u3088\u3073\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u30a8\u30e9\u30fc\u578b\u304c\u542b\u307e\u308c\u307e\u3059\u3002 Mutation \u306e\u64cd\u4f5c\u306e\u540d\u524d\u306f\u5b9f\u884c\u3055\u308c\u308b\u64cd\u4f5c\u3092\u8aac\u660e\u3057\u3001\u5165\u529b\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u306f\u64cd\u4f5c\u306b\u6e21\u3055\u308c\u308b\u30c7\u30fc\u30bf\u3092\u8a18\u8ff0\u3057\u3001\u623b\u308a\u5024\u306e\u578b\u306f\u64cd\u4f5c\u304c\u8fd4\u3059\u30c7\u30fc\u30bf\u306e\u578b\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u30af\u30a8\u30ea\u3068\u540c\u69d8\u306b\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f Mutation \u8981\u6c42\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u8981\u6c42\u3092\u89e3\u6790\u3057\u3066\u5bfe\u5fdc\u3059\u308b\u64cd\u4f5c\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002 \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u884c\u306b\u3088\u3063\u3066\u30c7\u30fc\u30bf\u304c\u5909\u66f4\u3055\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u64cd\u4f5c\u306e\u539f\u5b50\u6027\u3068\u30c7\u30fc\u30bf\u306e\u6574\u5408\u6027\u3092\u78ba\u4fdd\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 Mutation \u64cd\u4f5c\u304c\u6210\u529f\u3059\u308b\u3068\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u3001\u95a2\u9023\u60c5\u5831\u3092\u5fdc\u7b54\u306b\u542b\u3081\u307e\u3059\u3002 Mutation \u64cd\u4f5c\u304c\u5931\u6557\u3059\u308b\u3068\u3001\u30a8\u30e9\u30fc \u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30c7\u30fc\u30bf\u3092\u5909\u66f4\u307e\u305f\u306f\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u3001GraphQL \u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306e 1 \u3064\u3067\u3059\u3002 Mutation \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30c7\u30fc\u30bf\u306e\u4f5c\u6210\u3001\u66f4\u65b0\u3001\u524a\u9664\u306a\u3069\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u4e00\u9023\u306e\u30ab\u30b9\u30bf\u30e0\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u96fb\u5b50\u30e1\u30fc\u30eb\u306e\u9001\u4fe1\u3084\u30a4\u30d9\u30f3\u30c8\u306e\u30c8\u30ea\u30ac\u30fc\u306a\u3069\u3001\u4ed6\u306e\u30b5\u30fc\u30d0\u30fc\u5074\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u3082\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5168\u4f53\u3068\u3057\u3066\u3001\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f GraphQL \u306e\u30b3\u30a2\u6982\u5ff5\u306e 1 \u3064\u3067\u3042\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30c7\u30fc\u30bf\u306e\u5909\u66f4\u3084\u5909\u66f4\u306a\u3069\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u306e\u30ab\u30b9\u30bf\u30e0\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f Query \u3068\u540c\u69d8\u306b\u5b9f\u884c\u3055\u308c\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u8981\u6c42\u3092\u9001\u4fe1\u3057\u3066\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002 \u7a81\u7136\u5909\u7570\u306b\u3088\u308a\u3001GraphQL\u306f\u30c7\u30fc\u30bf\u306e\u30af\u30a8\u30ea\u3068\u5909\u66f4\u306e\u305f\u3081\u306e\u975e\u5e38\u306b\u67d4\u8edf\u3067\u62e1\u5f35\u53ef\u80fd\u306a\u8a00\u8a9e\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306eSDL\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u7d39\u4ecb\u3057\u3001\u4f8b\u3092\u6319\u3052\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL\u306eSDL(\u30b9\u30ad\u30fc\u30de\u5b9a\u7fa9\u8a00\u8a9e)\u306f\u3001GraphQL\u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u7c21\u6f54\u3067\u308f\u304b\u308a\u3084\u3059\u3044\u8a00\u8a9e\u3067\u3059\u3002 \u3053\u308c\u306f\u3001\u958b\u767a\u8005\u304c\u578b\u3001\u30d5\u30a3\u30fc\u30eb\u30c9\u3001\u30af\u30a8\u30ea\u3001\u304a\u3088\u3073\u5909\u66f4\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066 GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u69cb\u7bc9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u30c6\u30ad\u30b9\u30c8\u5f62\u5f0f\u3067\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u3067\u306f\u3001SDL \u306f\u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3059\u308b\u6a19\u6e96\u5316\u3055\u308c\u305f\u65b9\u6cd5\u3067\u3059\u3002 SDL\u306e\u5f62\u5f0f\u306f\u975e\u5e38\u306b\u7c21\u6f54\u3067\u3001\u8aad\u307f\u66f8\u304d\u304c\u7c21\u5358\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306f\u8ffd\u52a0\u306e\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u305b\u305a\u306b GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u3059\u3070\u3084\u304f\u5b9a\u7fa9\u304a\u3088\u3073\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5358\u7d14\u306a GraphQL \u30b9\u30ad\u30fc\u30de\u306e SDL \u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">bashCopy code<code>type Query {\n  book(id: ID!): Book\n}\n\ntype Book {\n  id: ID!\n  title: String\n  author: Author\n}\n\ntype Author {\n  id: ID!\n  name: String\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30af\u30a8\u30ea\u3001\u66f8\u7c4d\u3001\u8457\u8005\u306e 3 \u3064\u306e\u578b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 Query \u306f\u3001\u30af\u30a8\u30ea\u53ef\u80fd\u306a\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3059\u308b\u7279\u6b8a\u306a\u578b\u3067\u3059\u3002 \u3053\u306e\u4f8b\u3067\u306f\u3001id \u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u53d7\u3051\u53d6\u308a\u3001Book \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3059 book \u64cd\u4f5c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>[\u66f8\u7c4d] \u3068 [\u8457\u8005] \u306f\u3001\u305d\u308c\u305e\u308c [\u66f8\u7c4d] \u3068 [\u8457\u8005] \u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u5b9a\u7fa9\u3059\u308b 2 \u3064\u306e\u30ab\u30b9\u30bf\u30e0\u578b\u3067\u3059\u3002 \u3053\u306e\u4f8b\u3067\u306f\u3001\u30d6\u30c3\u30af\u30bf\u30a4\u30d7\u306b\u306f ID\u3001\u30bf\u30a4\u30c8\u30eb\u3001\u304a\u3088\u3073\u8457\u8005\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u542b\u307e\u308c\u3001\u8457\u8005\u30bf\u30a4\u30d7\u306b\u306f id \u30d5\u30a3\u30fc\u30eb\u30c9\u3068\u540d\u524d\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001SDL \u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3057\u3001\u30af\u30a8\u30ea\u3068\u30bf\u30a4\u30d7\u3092\u660e\u793a\u7684\u306b\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 SDL \u3067\u306f\u3001\u5909\u66f4\u64cd\u4f5c\u3001\u5217\u6319\u578b\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3001\u304a\u3088\u3073\u305d\u306e\u4ed6\u306e GraphQL \u30b9\u30ad\u30fc\u30de\u8981\u7d20\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5168\u4f53\u3068\u3057\u3066\u3001SDL for GraphQL \u306f\u3001GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u7c21\u6f54\u3067\u308f\u304b\u308a\u3084\u3059\u3044\u8a00\u8a9e\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306f\u8ffd\u52a0\u306e\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u305b\u305a\u306b GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u3059\u3070\u3084\u304f\u5b9a\u7fa9\u304a\u3088\u3073\u5909\u66f4\u3067\u304d\u307e\u3059\u3002 \u578b\u3001\u30d5\u30a3\u30fc\u30eb\u30c9\u3001\u30af\u30a8\u30ea\u3001\u304a\u3088\u3073\u5909\u66f4\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u8005\u306f SDL \u3092\u4f7f\u7528\u3057\u3066\u52b9\u7387\u7684\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>\u7a81\u7136\u5909\u7570\u306e\u4f8b\u3092\u6319\u3052\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u30b9\u30ad\u30fc\u30de\u3067\u65b0\u3057\u3044\u30e6\u30fc\u30b6\u30fc\u30ec\u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u7c21\u5358\u306a\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">typescriptCopy code<code>type Mutation {\n  createUser(input: CreateUserInput!): User!\n}\n\ninput CreateUserInput {\n  name: String!\n  email: String!\n}\n\ntype User {\n  id: ID!\n  name: String!\n  email: String!\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u30bf\u30a4\u30d7\u3092\u5b9a\u7fa9\u3057\u3001createUser \u3068\u3044\u3046\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 createUser \u30aa\u30da\u30ec\u30fc\u30b7\u30e7\u30f3\u306f\u3001input \u3068\u3044\u3046\u540d\u524d\u306e CreateUserInput \u578b\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u53d7\u3051\u53d6\u308a\u3001\u30e6\u30fc\u30b6\u30fc \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u306f\u3001\u5fc5\u8981\u306a\u540d\u524d\u3068\u96fb\u5b50\u30e1\u30fc\u30eb\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u306f\u3001\u65b0\u3057\u3044\u30e6\u30fc\u30b6\u30fc\u306e\u540d\u524d\u3068\u96fb\u5b50\u30e1\u30fc\u30eb \u30a2\u30c9\u30ec\u30b9\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c createUser \u8981\u6c42\u3092\u9001\u4fe1\u3059\u308b\u3068\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u5bfe\u5fdc\u3059\u308b\u64cd\u4f5c\u3092\u5b9f\u884c\u3057\u3001\u65b0\u3057\u304f\u4f5c\u6210\u3055\u308c\u305f User \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u307e\u3059\u3002 GraphQL \u306e\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044\u30e6\u30fc\u30b6\u30fc\u3092\u4f5c\u6210\u3059\u308b\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>mutation {\n  createUser(input: { name: \"John Doe\", email: \"johndoe@example.com\" }) {\n    id\n    name\n    email\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Mutation \u3092\u4f7f\u7528\u3057\u3066 John Doe \u3068\u3044\u3046\u540d\u524d\u306e\u65b0\u3057\u3044\u30e6\u30fc\u30b6\u30fc\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u30e1\u30fc\u30eb \u30a2\u30c9\u30ec\u30b9\u3092&nbsp;<a href=\"mailto:johndoe@example.com\">johndoe@example.com<\/a>&nbsp;\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002 Mutation \u306e\u5fdc\u7b54\u3067\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u65b0\u3057\u304f\u4f5c\u6210\u3055\u308c\u305f\u30e6\u30fc\u30b6\u30fc \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e ID\u3001\u540d\u524d\u3001\u304a\u3088\u3073\u96fb\u5b50\u30e1\u30fc\u30eb \u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u3001GraphQL \u30b9\u30ad\u30fc\u30de\u3067\u5909\u66f4\u30aa\u30da\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30c7\u30fc\u30bf\u306e\u4f5c\u6210\u3001\u66f4\u65b0\u3001\u524a\u9664\u306a\u3069\u306e\u30ab\u30b9\u30bf\u30e0\u5909\u66f4\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 Mutation \u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u8005\u306f\u52b9\u7387\u7684\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u3067\u67d4\u8edf\u306a GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u30af\u30a8\u30ea\u8a00\u8a9e\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL\u67e5\u8be2\u8bed\u8a00\u662f\u4e00\u79cd\u7528\u4e8e\u83b7\u53d6\u6570\u636e\u7684\u7075\u6d3b\u800c\u5f3a\u5927\u7684\u8bed\u8a00\u3002\u5b83\u5141\u8bb8\u5ba2\u6237\u7aef\u6307\u5b9a\u5176\u9700\u8981\u7684\u7cbe\u786e\u6570\u636e\uff0c\u800c\u65e0\u9700\u83b7\u53d6\u591a\u4f59\u7684\u6570\u636e\u3002\u67e5\u8be2\u8bed\u8a00\u662fGraphQL\u7684\u6838\u5fc3\u6982\u5ff5\u4e4b\u4e00\uff0c\u5b83\u662fGraphQL\u7684\u4e3b\u8981\u65b9\u5f0f\uff0c\u7528\u4e8e\u83b7\u53d6\u548c\u5904\u7406\u6570\u636e\u3002<\/p>\n\n\n\n<p>GraphQL\u67e5\u8be2\u8bed\u8a00\u662f\u57fa\u4e8e\u5b57\u6bb5\u7684\uff0c\u5b83\u5141\u8bb8\u5ba2\u6237\u7aef\u8bf7\u6c42\u7279\u5b9a\u5b57\u6bb5\uff0c\u5e76\u6307\u5b9a\u5d4c\u5957\u5b57\u6bb5\uff0c\u4ee5\u4fbf\u83b7\u53d6\u5173\u8054\u6570\u636e\u3002\u67e5\u8be2\u8bed\u8a00\u8fd8\u652f\u6301\u53d8\u91cf\u548c\u53c2\u6570\uff0c\u53ef\u4ee5\u52a8\u6001\u5730\u6784\u5efa\u67e5\u8be2\u3002\u67e5\u8be2\u8bed\u8a00\u8fd8\u5177\u6709\u4e30\u5bcc\u7684\u5185\u7f6e\u7c7b\u578b\u7cfb\u7edf\uff0c\u7528\u4e8e\u8868\u793a\u590d\u6742\u7684\u6570\u636e\u7c7b\u578b\uff0c\u4f8b\u5982\u5bf9\u8c61\u3001\u6570\u7ec4\u3001\u679a\u4e3e\u7b49\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684GraphQL\u67e5\u8be2\u793a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>query {\n  book(id: \"1\") {\n    title\n    author {\n      name\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528GraphQL\u67e5\u8be2\u8bed\u8a00\u83b7\u53d6id\u4e3a1\u7684\u4e66\u7c4d\u7684\u6807\u9898\u548c\u4f5c\u8005\u540d\u79f0\u3002\u6211\u4eec\u4f7f\u7528book\u64cd\u4f5c\u6307\u5b9a\u4e66\u7c4d\uff0c\u5e76\u5c06id\u53c2\u6570\u8bbe\u7f6e\u4e3a1\u3002\u5728\u4e66\u7c4d\u5b57\u6bb5\u540e\u9762\uff0c\u6211\u4eec\u6307\u5b9a\u4e86\u4e00\u4e2a\u5d4c\u5957\u5b57\u6bb5author\uff0c\u4ee5\u83b7\u53d6\u4f5c\u8005\u7684\u540d\u79f0\u3002<\/p>\n\n\n\n<p>\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0c\u5ba2\u6237\u7aef\u53ef\u4ee5\u6307\u5b9a\u5176\u9700\u8981\u7684\u6570\u636e\uff0c\u5e76\u4e14\u53ea\u4f1a\u83b7\u53d6\u8bf7\u6c42\u7684\u6570\u636e\uff0c\u800c\u65e0\u9700\u83b7\u53d6\u591a\u4f59\u7684\u6570\u636e\u3002GraphQL\u67e5\u8be2\u8bed\u8a00\u8fd8\u652f\u6301\u5206\u9875\u3001\u6392\u5e8f\u3001\u8fc7\u6ee4\u7b49\u9ad8\u7ea7\u529f\u80fd\uff0c\u7528\u4e8e\u4f18\u5316\u6570\u636e\u83b7\u53d6\u3002\u901a\u8fc7\u4f7f\u7528\u67e5\u8be2\u8bed\u8a00\uff0c\u5ba2\u6237\u7aef\u53ef\u4ee5\u7075\u6d3b\u5730\u6784\u5efa\u548c\u83b7\u53d6\u6570\u636e\uff0c\u5e76\u83b7\u5f97\u66f4\u597d\u7684\u6027\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u4ecb\u7ecdGraphQL\u7684\u7c7b\u578b\u7cfb\u7edf\u548c\u7c7b\u578b\u5b9a\u4e49<\/p>\n\n\n\n<p>GraphQL\u7684\u7c7b\u578b\u7cfb\u7edf\u662fGraphQL\u7684\u6838\u5fc3\u4e4b\u4e00\uff0c\u5b83\u5b9a\u4e49\u4e86GraphQL API\u4e2d\u53ef\u7528\u7684\u6240\u6709\u7c7b\u578b\u548c\u64cd\u4f5c\u3002\u7c7b\u578b\u7cfb\u7edf\u662f\u7531\u7c7b\u578b\u5b9a\u4e49\u7ec4\u6210\u7684\uff0c\u8fd9\u4e9b\u7c7b\u578b\u5b9a\u4e49\u63cf\u8ff0\u4e86GraphQL schema\u4e2d\u7684\u6bcf\u4e2a\u7c7b\u578b\u3001\u5b57\u6bb5\u548c\u64cd\u4f5c\u3002<\/p>\n\n\n\n<p>GraphQL\u7684\u7c7b\u578b\u7cfb\u7edf\u5305\u62ec\u6807\u91cf\u7c7b\u578b\u3001\u5bf9\u8c61\u7c7b\u578b\u3001\u63a5\u53e3\u7c7b\u578b\u3001\u8054\u5408\u7c7b\u578b\u3001\u679a\u4e3e\u7c7b\u578b\u3001\u8f93\u5165\u5bf9\u8c61\u7c7b\u578b\u548c\u5217\u8868\u7c7b\u578b\u3002\u6bcf\u4e2a\u7c7b\u578b\u90fd\u6709\u81ea\u5df1\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u5e76\u4e14\u53ef\u4ee5\u4e0e\u5176\u4ed6\u7c7b\u578b\u7ec4\u5408\u4f7f\u7528\uff0c\u4ee5\u521b\u5efa\u66f4\u590d\u6742\u7684\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>\u7c7b\u578b\u5b9a\u4e49\u662f\u7528\u4e8e\u5b9a\u4e49GraphQL schema\u4e2d\u7684\u7c7b\u578b\u3001\u5b57\u6bb5\u548c\u64cd\u4f5c\u7684\u8bed\u6cd5\u3002GraphQL\u652f\u6301\u4e24\u79cd\u7c7b\u578b\u5b9a\u4e49\u8bed\u8a00\uff1aSDL\uff08Schema Definition Language\uff09\u548c\u7a0b\u5e8f\u4ee3\u7801\u3002SDL\u662f\u4e00\u79cd\u57fa\u4e8e\u6587\u672c\u7684\u7c7b\u578b\u5b9a\u4e49\u8bed\u8a00\uff0c\u5b83\u4f7f\u7528\u7b80\u5355\u7684\u8bed\u6cd5\u6765\u5b9a\u4e49GraphQL schema\u3002\u7a0b\u5e8f\u4ee3\u7801\u662f\u4f7f\u7528\u7f16\u7a0b\u8bed\u8a00\uff08\u5982JavaScript\u3001Java\u3001Python\u7b49\uff09\u7f16\u5199\u7684\u7c7b\u578b\u5b9a\u4e49\uff0c\u5b83\u4eec\u53ef\u4ee5\u901a\u8fc7\u7279\u5b9a\u7684\u5e93\u6216\u6846\u67b6\u6765\u89e3\u6790\u548c\u5904\u7406\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2aSDL\u7c7b\u578b\u5b9a\u4e49\u7684\u793a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">bashCopy code<code>type Book {\n  id: ID!\n  title: String!\n  author: Author!\n}\n\ntype Author {\n  id: ID!\n  name: String!\n  books: [Book]!\n}\n\ntype Query {\n  book(id: ID!): Book\n  author(id: ID!): Author\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u66f8\u7c4d\u3001\u8457\u8005\u3001\u30af\u30a8\u30ea\u306e 3 \u3064\u306e\u30bf\u30a4\u30d7\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 Book \u578b\u3068 Author \u578b\u306f\u3001\u305d\u308c\u305e\u308c\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 Query \u30bf\u30a4\u30d7\u306f\u3001\u30af\u30a8\u30ea\u3067\u4f7f\u7528\u3067\u304d\u308b\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u578b\u5b9a\u7fa9\u306f GraphQL \u30b9\u30ad\u30fc\u30de\u306e\u57fa\u790e\u3067\u3042\u308a\u3001GraphQL API \u306e\u69cb\u9020\u3068\u6a5f\u80fd\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u958b\u767a\u8005\u306f\u3001\u578b\u5b9a\u7fa9\u3092\u4f7f\u7528\u3057\u3066\u72ec\u81ea\u306e GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u5f37\u529b\u306a\u578b\u30b7\u30b9\u30c6\u30e0\u3092\u4f7f\u7528\u3057\u3066\u52b9\u7387\u7684\u3067\u62e1\u5f35\u53ef\u80fd\u306a API \u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>\u30ce\u30fc\u30c9.js\u3068\u30a8\u30af\u30b9\u30d7\u30ec\u30b9.js\u306e\u5c0e\u5165\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>Node.js \u306f\u3001Chrome V8 JavaScript \u30a8\u30f3\u30b8\u30f3\u3092\u30d9\u30fc\u30b9\u306b\u3057\u305f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30af\u30ed\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u8efd\u91cf\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3001\u9ad8\u6027\u80fd\u306a\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 \u30a4\u30d9\u30f3\u30c8\u99c6\u52d5\u578b\u306e\u30ce\u30f3\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0 I\/O \u30e2\u30c7\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u540c\u6642\u5b9f\u884c\u6027\u306e\u9ad8\u3044\u8981\u6c42\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u51e6\u7406\u3057\u307e\u3059\u3002 \u30ce\u30fc\u30c9.js\u306b\u3088\u308a\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u3067JavaScript\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001JavaScript\u306f\u4eba\u6c17\u306e\u3042\u308b\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8a00\u8a9e\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>Express.js\u306f\u3001Node.js\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u57fa\u3065\u304f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306eWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 \u30a4\u30d9\u30f3\u30c8\u99c6\u52d5\u578b\u306e\u30ce\u30f3\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0I \/ O\u30e2\u30c7\u30eb\u306a\u3069\u3001Node\u306e.js\u306b\u3042\u308b\u591a\u304f\u306e\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u8981\u6c42\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u51e6\u7406\u3067\u304d\u307e\u3059\u3002 Express .js \u306f\u3001\u958b\u767a\u8005\u304c\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8fc5\u901f\u306b\u69cb\u7bc9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u67d4\u8edf\u306a API \u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u8a8d\u8a3c\u3001\u30ed\u30ae\u30f3\u30b0\u3001\u30a8\u30e9\u30fc\u51e6\u7406\u306a\u3069\u306e\u4e00\u822c\u7684\u306aWeb\u958b\u767a\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u591a\u304f\u306e\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3082\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Node.js \u3068 Express .js \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u958b\u767a\u8005\u306f RESTful API \u3084\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u306e\u9ad8\u6027\u80fd Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8fc5\u901f\u304b\u3064\u52b9\u7387\u7684\u306b\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306f\u3001\u958b\u767a\u8005\u304c\u57fa\u76e4\u3068\u306a\u308b\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306b\u5bfe\u51e6\u3059\u308b\u3053\u3068\u306a\u304f\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306b\u96c6\u4e2d\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u8c4a\u5bcc\u306a\u30c4\u30fc\u30eb\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u540c\u6642\u306b\u3001Node.js\u3068Express.js\u306fJavaScript\u8a00\u8a9e\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001\u958b\u767a\u8005\u306f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u9593\u3067\u30b3\u30fc\u30c9\u3092\u5171\u6709\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u30671\u3064\u306e\u8a00\u8a9e\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306eJavaScript\u5b9f\u88c5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044:graphql.js\u304a\u3088\u3073express-graphql<\/p>\n\n\n\n<p>GraphQL\u306b\u306f\u591a\u304f\u306eJavaScript\u5b9f\u88c5\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u305d\u306e\u3046\u3061\u306e2\u3064\u306f\u3001\u3088\u308a\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u306e\u306fgraphQL.js\u304a\u3088\u3073express-graphQL\u3067\u3059\u3002<\/p>\n\n\n\n<p>Graphql.js \u306f\u3001GraphQL \u30a8\u30f3\u30b8\u30f3\u306e JavaScript \u306e\u307f\u306e\u5b9f\u88c5\u3067\u3059\u3002 \u958b\u767a\u8005\u304c GraphQL \u30af\u30a8\u30ea\u306e\u4f5c\u6210\u3068\u5b9f\u884c\u3001GraphQL \u30b9\u30ad\u30fc\u30de\u306e\u5b9a\u7fa9\u3001GraphQL \u30b9\u30c6\u30fc\u30c8\u30e1\u30f3\u30c8\u306e\u89e3\u6790\u306a\u3069\u3092\u53ef\u80fd\u306b\u3059\u308b\u4e00\u9023\u306e API \u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 GraphQL .js \u306f\u30d6\u30e9\u30a6\u30b6\u3068\u30ce\u30fc\u30c9.js\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3001\u4efb\u610f\u306e\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9\u3068\u7d71\u5408\u3067\u304d\u307e\u3059\u3002 GraphQL .js\u306f\u57fa\u672c\u7684\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b\u305f\u3081\u3001\u958b\u767a\u8005\u306f\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30ea\u30af\u30a8\u30b9\u30c8\u3084\u30c7\u30fc\u30bf\u30b9\u30c8\u30ec\u30fc\u30b8\u306a\u3069\u3092\u51e6\u7406\u3059\u308b\u72ec\u81ea\u306e\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>express-graphql \u306f\u3001Express.js \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u57fa\u3065\u304f GraphQL \u30b5\u30fc\u30d0\u30fc\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3067\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c HTTP \u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u4ecb\u3057\u3066 GraphQL \u30af\u30a8\u30ea\u3092\u9001\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b GraphQL HTTP \u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 express-graphQL \u306f\u81ea\u52d5\u7684\u306b GraphQL \u30af\u30a8\u30ea\u3092\u89e3\u6790\u3057\u3066\u5b9f\u884c\u30b3\u30fc\u30c9\u306b\u5909\u63db\u3057\u3001GraphQL \u30b5\u30fc\u30d0\u30fc\u306e\u6a5f\u80fd\u3092\u6709\u52b9\u306b\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u958b\u767a\u8005\u304c GraphQL \u30b9\u30ad\u30fc\u30de\u306e\u4f5c\u6210\u3001\u30af\u30a8\u30ea\u306e\u51e6\u7406\u3001\u8a8d\u8a3c\u3001\u305d\u306e\u4ed6\u306e\u4e00\u822c\u7684\u306a\u30a6\u30a7\u30d6\u958b\u767a\u30bf\u30b9\u30af\u3092\u3059\u3070\u3084\u304f\u4f5c\u6210\u3067\u304d\u308b\u4e00\u9023\u306e\u30c4\u30fc\u30eb\u3082\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>graphQL .js\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u958b\u767a\u8005\u306f\u72ec\u81ea\u306e GraphQL \u30b5\u30fc\u30d0\u30fc\u3092\u81ea\u7531\u306b\u69cb\u7bc9\u3057\u3001\u4efb\u610f\u306e\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9\u306b\u7d71\u5408\u3067\u304d\u307e\u3059\u3002 express-graphQL \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u958b\u767a\u8005\u306f\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a GraphQL \u30b5\u30fc\u30d0\u30fc\u3092\u3059\u3070\u3084\u304f\u4f5c\u6210\u3057\u3001\u30af\u30a8\u30ea\u3084\u8a8d\u8a3c\u306a\u3069\u306e\u30bf\u30b9\u30af\u3092\u7c21\u5358\u306b\u51e6\u7406\u3067\u304d\u307e\u3059\u3002 \u3069\u3061\u3089\u306e\u5b9f\u88c5\u306b\u3082\u72ec\u81ea\u306e\u5229\u70b9\u304c\u3042\u308a\u3001\u958b\u767a\u8005\u306f\u7279\u5b9a\u306e\u30cb\u30fc\u30ba\u306b\u5fdc\u3058\u3066\u9078\u629e\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306eJavaScript\u5b9f\u88c5\u306e\u4f8b\u3092\u6319\u3052\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001graphql .js\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30af\u30a8\u30ea\u3092\u5b9f\u88c5\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const { graphql, buildSchema } = require('graphql');\n\n\/\/ \u5b9a\u4e49GraphQL schema\nconst schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n\n\/\/ \u5b9a\u4e49\u67e5\u8be2\u5904\u7406\u5668\nconst root = {\n  hello: () =&gt; 'Hello, GraphQL!',\n};\n\n\/\/ \u6267\u884cGraphQL\u67e5\u8be2\ngraphql(schema, '{ hello }', root).then((response) =&gt; {\n  console.log(response);\n});\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001GraphQL .js\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3057\u3001\u30af\u30a8\u30ea\u30bf\u30a4\u30d7 Query \u3068\u30af\u30a8\u30ea\u30d5\u30a3\u30fc\u30eb\u30c9 hello \u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001hello \u30af\u30a8\u30ea\u306e\u30ed\u30b8\u30c3\u30af\u3092\u5b9f\u88c5\u3059\u308b\u30af\u30a8\u30ea \u30d7\u30ed\u30bb\u30c3\u30b5 \u30eb\u30fc\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u6700\u5f8c\u306b\u3001GraphQL .js\u3092\u4f7f\u7528\u3057\u3066\u30af\u30a8\u30ea\u3092\u5b9f\u884c\u3057\u3001hello \u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u30af\u30a8\u30ea\u3057\u3066\u3001\u5fdc\u7b54\u3092\u51fa\u529b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>express-graphql \u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30b5\u30fc\u30d0\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const express = require('express');\nconst { graphqlHTTP } = require('express-graphql');\nconst { buildSchema } = require('graphql');\n\n\/\/ \u5b9a\u4e49GraphQL schema\nconst schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n\n\/\/ \u5b9a\u4e49\u67e5\u8be2\u5904\u7406\u5668\nconst root = {\n  hello: () =&gt; 'Hello, GraphQL!',\n};\n\n\/\/ \u521b\u5efaExpress.js\u5e94\u7528\u7a0b\u5e8f\nconst app = express();\n\n\/\/ \u5c06GraphQL\u670d\u52a1\u5668\u6dfb\u52a0\u4e3aExpress.js\u4e2d\u95f4\u4ef6\napp.use('\/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true, \/\/ \u542f\u7528GraphQL IDE\n}));\n\n\/\/ \u542f\u52a8\u670d\u52a1\u5668\napp.listen(3000, () =&gt; {\n  console.log('Server started on port 3000');\n});\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001express-graphql \u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30b5\u30fc\u30d0\u30fc\u3092\u4f5c\u6210\u3057\u3001Express .js \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3068\u3057\u3066\u8ffd\u52a0\u3057\u307e\u3059\u3002 \u524d\u306e\u4f8b\u3068\u540c\u69d8\u306b\u3001GraphQL \u30b9\u30ad\u30fc\u30de\u3068\u30af\u30a8\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30af\u30a8\u30ea\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b GraphQL IDE \u3092\u6709\u52b9\u306b\u3057\u307e\u3057\u305f\u3002 \u6700\u5f8c\u306b\u3001\u30dd\u30fc\u30c83000\u3067\u30ea\u30c3\u30b9\u30f3\u3059\u308b\u3088\u3046\u306b\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u30b9\u30ad\u30fc\u30de\u3068\u30ea\u30be\u30eb\u30d0\u30fc\u306e\u4f5c\u6210\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u3067\u306f\u3001\u30b9\u30ad\u30fc\u30de\u306f\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3068\u578b\u3092\u5b9a\u7fa9\u3057\u3001\u30ea\u30be\u30eb\u30d0\u30fc\u306f\u30af\u30a8\u30ea\u306e\u51e6\u7406\u3068\u3053\u308c\u3089\u306e\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u306e\u64cd\u4f5c\u3092\u62c5\u5f53\u3057\u307e\u3059\u3002 \u4ee5\u4e0b\u3067\u306f\u3001GraphQL\u30b9\u30ad\u30fc\u30de\u3068\u30ea\u30be\u30eb\u30d0\u30fc\u306e\u4f5c\u6210\u65b9\u6cd5\u3092\u305d\u308c\u305e\u308c\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b0\u30e9\u30d5 QL \u30b9\u30ad\u30fc\u30de\u3092\u4f5c\u6210\u3059\u308b<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u5c0e\u5165\u3057\u3001\u6b21\u306b\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<code>graphql<\/code><code>buildSchema()<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const { buildSchema } = require('graphql');\n\nconst schema = buildSchema(`\n  type Query {\n    book(id: ID!): Book\n  }\n\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n`);\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u3001\u578b\u3068\u578b\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\u3002 \u578b\u306b\u540d\u524d\u306e\u4ed8\u3044\u305f\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u3042\u308a\u3001\u578b\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002 \u3053\u306e\u578b\u306b\u306f\u3001\u30d6\u30c3\u30af\u306e\u3001\u3001\u304a\u3088\u3073\u60c5\u5831\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<code>Book<\/code><code>Query<\/code><code>Query<\/code><code>book<\/code><code>ID<\/code><code>id<\/code><code>Book<\/code><code>id<\/code><code>title<\/code><code>author<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u521b\u5efaGraphQL Resolvers<\/h4>\n\n\n\n<p>\u4e00\u65e6\u5b9a\u4e49\u4e86GraphQL schema\uff0c\u6211\u4eec\u9700\u8981\u7f16\u5199GraphQL resolvers\u6765\u5b9e\u73b0\u67e5\u8be2\u548c\u64cd\u4f5c\u6570\u636e\u7684\u903b\u8f91\u3002\u5728GraphQL\u4e2d\uff0cresolver\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u5b83\u63a5\u6536\u67e5\u8be2\u53c2\u6570\u5e76\u8fd4\u56de\u67e5\u8be2\u7ed3\u679c\u3002\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u6bcf\u4e2aGraphQL\u5b57\u6bb5\u90fd\u5bf9\u5e94\u4e00\u4e2aresolver\u3002<\/p>\n\n\n\n<p>\u5728JavaScript\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5bf9\u8c61\u6765\u7ec4\u7ec7resolver\uff0c\u5176\u4e2d\u6bcf\u4e2a\u5b57\u6bb5\u540d\u5bf9\u5e94\u7740schema\u4e2d\u7684\u5b57\u6bb5\u540d\u3002\u4f8b\u5982\uff0c\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u5b9a\u4e49&nbsp;\u67e5\u8be2\u7684resolver\uff1a<code>book<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const books = [\n  { id: '1', title: 'The Hobbit', author: 'J. R. R. Tolkien' },\n  { id: '2', title: 'Harry Potter and the Philosopher\\'s Stone', author: 'J. K. Rowling' }\n];\n\nconst resolvers = {\n  Query: {\n    book: (parent, { id }) =&gt; {\n      return books.find(book =&gt; book.id === id);\n    }\n  }\n};\n<\/code><\/pre>\n\n\n\n<p>\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a&nbsp;\u6570\u7ec4\uff0c\u5305\u542b\u4e24\u672c\u4e66\u7684\u4fe1\u606f\u3002\u7136\u540e\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2aresolver\u5bf9\u8c61\uff0c\u5176\u4e2d&nbsp;\u67e5\u8be2\u7684resolver\u63a5\u6536\u4e00\u4e2a&nbsp;\u53c2\u6570\uff0c\u5e76\u4ece&nbsp;\u6570\u7ec4\u4e2d\u67e5\u627e\u4e0e\u8be5&nbsp;\u5bf9\u5e94\u7684\u4e66\u7c4d\u3002\u6700\u540e\uff0c\u6211\u4eec\u5c06&nbsp;\u5bf9\u8c61\u4e0e&nbsp;\u5bf9\u8c61\u7ed3\u5408\u8d77\u6765\uff0c\u521b\u5efaGraphQL\u670d\u52a1\u3002<code>books<\/code><code>book<\/code><code>id<\/code><code>books<\/code><code>id<\/code><code>resolvers<\/code><code>schema<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const { graphql, buildSchema } = require('graphql');\n\nconst schema = buildSchema(`\n  type Query {\n    book(id: ID!): Book\n  }\n\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n`);\n\nconst books = [\n  { id: '1', title: 'The Hobbit', author: 'J. R. R. Tolkien' },\n  { id: '2', title: 'Harry Potter and the Philosopher\\'s Stone', author: 'J. K. Rowling' }\n];\n\nconst resolvers = {\n  Query: {\n    book: (parent, { id }) =&gt; {\n      return books.find(book =&gt; book.id === id);\n    }\n  }\n};\n\nconst query = `\n  query {\n    book(id: \"1\") {\n      id\n      title\n      author\n    }\n  }\n`;\n\ngraphql(schema, query, resolvers).then((result) =&gt; {\n  console.log(result);\n});\n<\/code><\/pre>\n\n\n\n<p>\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a\u67e5\u8be2\uff0c\u67e5\u8be2id\u4e3a1\u7684\u4e66<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u5982\u4f55\u5728Express.js\u4e2d\u914d\u7f6eGraphQL<\/p>\n\n\n\n<p>\u5728Express.js\u4e2d\u914d\u7f6eGraphQL\u53ef\u4ee5\u4f7f\u7528\u5b98\u65b9\u63d0\u4f9b\u7684express-graphql\u4e2d\u95f4\u4ef6\u3002\u9996\u5148\u9700\u8981\u5b89\u88c5express-graphql\u548cgraphql\u4e24\u4e2anpm\u5305\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Copy code<code>npm install express-graphql graphql\n<\/code><\/pre>\n\n\n\n<p>\u7136\u540e\u5728Express.js\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5f15\u5165\u8fd9\u4e24\u4e2a\u5305\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const express = require('express');\nconst graphqlHTTP = require('express-graphql');\nconst { buildSchema } = require('graphql');\n<\/code><\/pre>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u53ef\u4ee5\u4f7f\u7528buildSchema\u65b9\u6cd5\u521b\u5efaGraphQL schema\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n<\/code><\/pre>\n\n\n\n<p>\u8fd9\u4e2aschema\u5b9a\u4e49\u4e86\u4e00\u4e2a\u540d\u4e3ahello\u7684\u67e5\u8be2\u5b57\u6bb5\uff0c\u5b83\u8fd4\u56de\u4e00\u4e2a\u5b57\u7b26\u4e32\u3002<\/p>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u9700\u8981\u521b\u5efa\u89e3\u6790\u5668\u51fd\u6570\u6765\u5904\u7406\u8fd9\u4e2a\u67e5\u8be2\u3002\u89e3\u6790\u5668\u51fd\u6570\u5fc5\u987b\u4e0e\u5b9a\u4e49\u7684\u67e5\u8be2\u5b57\u6bb5\u540d\u79f0\u76f8\u540c\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const root = {\n  hello: () =&gt; 'Hello world!',\n};\n<\/code><\/pre>\n\n\n\n<p>\u8fd9\u4e2a\u89e3\u6790\u5668\u51fd\u6570\u5b9a\u4e49\u4e86\u4e00\u4e2a\u540d\u4e3ahello\u7684\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u8fd4\u56de\u201cHello world\uff01\u201d\u5b57\u7b26\u4e32\u3002<\/p>\n\n\n\n<p>\u73b0\u5728\u53ef\u4ee5\u5c06GraphQL\u4e2d\u95f4\u4ef6\u6dfb\u52a0\u5230Express\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const app = express();\n\napp.use('\/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u306f\u3001\u69cb\u6210\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3068\u3057\u3066\u53d7\u3051\u5165\u308c\u307e\u3059\u3002 \u30b9\u30ad\u30fc\u30de\u30d1\u30e9\u30e1\u30fc\u30bf\u306f GraphQL \u30b9\u30ad\u30fc\u30de\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3001rootValue \u30d1\u30e9\u30e1\u30fc\u30bf\u306f\u30d1\u30fc\u30b5\u30fc\u95a2\u6570\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002 graphiql \u30d1\u30e9\u30e1\u30fc\u30bf\u306f GraphiQL \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u6709\u52b9\u306b\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL API \u306f\u3001\u30a8\u30af\u30b9\u30d7\u30ec\u30b9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b POST \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308b\u3053\u3068\u3067\u30af\u30a8\u30ea\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002 \u4f8b\u3048\u3070\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">bashCopy code<code>POST \/graphql HTTP\/1.1\nContent-Type: application\/json\n\n{\n  \"query\": \"{ hello }\"\n}\n<\/code><\/pre>\n\n\n\n<p>\u8981\u6c42\u306f &#8220;\u3053\u3093\u306b\u3061\u306f\u4e16\u754c!&#8221; \u3092\u542b\u3080\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8fd4\u3057\u307e\u3059\u3002 JSON \u5fdc\u7b54:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">jsonCopy code<code>{\n  \"data\": {\n    \"hello\": \"Hello world!\"\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u30a8\u30af\u30b9\u30d7\u30ec\u30b9.js\u3067 GraphQL \u3092\u8a2d\u5b9a\u3059\u308b\u57fa\u672c\u7684\u306a\u30d7\u30ed\u30bb\u30b9\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>React\u3068Apollo\u306e\u7d39\u4ecb\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>React \u306f\u3001\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e JavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 \u3053\u308c\u306fFacebook\u306b\u3088\u3063\u3066\u958b\u767a\u3055\u308c\u3001\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u4eba\u6c17\u306e\u3042\u308b\u30aa\u30d7\u30b7\u30e7\u30f3\u306e1\u3064\u3067\u3059\u3002 React\u306f\u3001\u4eee\u60f3DOM\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u3055\u308c\u305f\u958b\u767a\u30e2\u30c7\u30eb\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u3092\u7c21\u7d20\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Apollo \u306f\u3001GraphQL \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002 \u52b9\u7387\u7684\u306a GraphQL \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u6700\u65b0\u306e\u30c4\u30fc\u30eb\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001GraphQL \u30af\u30a8\u30ea\u3068\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u767a\u884c\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3001\u304a\u3088\u3073\u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u30ed\u30fc\u30ab\u30eb\u72b6\u614b\u7ba1\u7406\u3001\u304a\u3088\u3073\u9ad8\u5ea6\u306a\u30c7\u30fc\u30bf\u53d6\u308a\u8fbc\u307f\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>React\u3068Apollo\u306f\u5354\u529b\u3057\u3066\u52b9\u7387\u7684\u306aGraphQL\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002 React\u306f\u3001Apollo\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u305f\u3081\u306e\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059\u3002 Apollo \u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3068\u30c7\u30fc\u30bf \u30a4\u30f3\u30b8\u30a7\u30b9\u30c8\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3068\u3001\u52b9\u7387\u7684\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u6a5f\u80fd\u3068\u30af\u30a8\u30ea\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>React\u3068Apollo\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u512a\u308c\u305f\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u63d0\u4f9b\u3059\u308b\u5f37\u529b\u3067\u52b9\u7387\u7684\u306aGraphQL\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>React\u3067Apollo\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u3066GraphQL API\u3092\u30af\u30a8\u30ea\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>Apollo Client \u3092\u4f7f\u7528\u3057\u3066 React \u3067 GraphQL API \u3092\u30af\u30a8\u30ea\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u624b\u9806\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30a2\u30dd\u30ed\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>\u307e\u305a\u3001Apollo\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 npm\u307e\u305f\u306fyarn\u3092\u4ecb\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">bashCopy code<code>npm install @apollo\/client\n<\/code><\/pre>\n\n\n\n<p>\u53c8\u306f<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">sqlCopy code<code>yarn add @apollo\/client\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>React \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u30eb\u30fc\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u3001\u6b21\u306e\u3082\u306e\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>ApolloClient<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>import { ApolloClient, InMemoryCache } from '@apollo\/client';\n\nconst client = new ApolloClient({\n  uri: 'https:\/\/mygraphqlapi.com\/graphql',\n  cache: new InMemoryCache()\n});\n<\/code><\/pre>\n\n\n\n<p>\u3053\u3053\u3067\u306f\u3001GraphQL API \u306e URL \u3068\u4f7f\u7528\u3055\u308c\u308b\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>\u30b0\u30e9\u30d5 QL \u30c7\u30fc\u30bf\u306e\u30af\u30a8\u30ea<\/li>\n<\/ol>\n\n\n\n<p>\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u3057\u307e\u3059\u3002 React\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<code>useQuery<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>import { useQuery, gql } from '@apollo\/client';\n\nconst MY_QUERY = gql`\n  query {\n    books {\n      id\n      title\n    }\n  }\n`;\n\nfunction MyComponent() {\n  const { loading, error, data } = useQuery(MY_QUERY);\n\n  if (loading) return &lt;p&gt;Loading...&lt;\/p&gt;;\n  if (error) return &lt;p&gt;Error :(&lt;\/p&gt;;\n\n  return (\n    &lt;ul&gt;\n      {data.books.map(book =&gt; (\n        &lt;li key={book.id}&gt;{book.title}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u3053\u3067\u306f\u3001\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30af\u30a8\u30ea\u3092\u5b9a\u7fa9\u3057\u3001\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u3057\u307e\u3059\u3002 \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8aad\u307f\u8fbc\u307f\u3068\u30a8\u30e9\u30fc\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\u3002<code>gql<\/code><code>useQuery<\/code><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>GraphQL \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u9001\u4fe1\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002 React\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<code>useMutation<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>import { useMutation, gql } from '@apollo\/client';\n\nconst ADD_BOOK = gql`\n  mutation AddBook($title: String!, $author: String!) {\n    addBook(title: $title, author: $author) {\n      id\n      title\n      author\n    }\n  }\n`;\n\nfunction AddBookForm() {\n  const [title, setTitle] = useState('');\n  const [author, setAuthor] = useState('');\n\n  const [addBook, { data }] = useMutation(ADD_BOOK);\n\n  const handleSubmit = event =&gt; {\n    event.preventDefault();\n    addBook({ variables: { title, author } });\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;input\n        type=\"text\"\n        placeholder=\"Title\"\n        value={title}\n        onChange={event =&gt; setTitle(event.target.value)}\n      \/&gt;\n      &lt;input\n        type=\"text\"\n        placeholder=\"Author\"\n        value={author}\n        onChange={event =&gt; setAuthor(event.target.value)}\n      \/&gt;\n      &lt;button type=\"submit\"&gt;Add Book&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u3053\u3067\u306f\u3001\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u3001\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u30b3\u30df\u30c3\u30c8\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u5909\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30bf\u30a4\u30c8\u30eb\u3068\u8457\u8005\u3092\u30d6\u30c3\u30af\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<code>gql<\/code><code>useMutation<\/code><\/p>\n\n\n\n<p>\u4e0a\u8a18\u306e\u624b\u9806\u3092\u4f7f\u7528\u3057\u3066\u3001React \u306e Apollo Client \u3092\u4f7f\u7528\u3057\u3066 GraphQL API \u3092\u30af\u30a8\u30ea\u3057\u3001\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u9001\u4fe1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>React\u30d5\u30c3\u30af\u3068GraphQL\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30fc\u30bf\u53d6\u5f97\u3068\u72b6\u614b\u7ba1\u7406\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>React \u30d5\u30c3\u30af\u3068 GraphQL \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u53d6\u308a\u8fbc\u307f\u3068\u72b6\u614b\u7ba1\u7406\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002 \u57fa\u672c\u7684\u306a\u624b\u9806\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b:\u307e\u305a\u3001React\u3068GraphQL\u306b\u95a2\u9023\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u3001\u304a\u3088\u3073React \u3067GraphQL\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306eApollo\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">bashCopy code<code>npm install react graphql apollo-boost @apollo\/react-hooks\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b: \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067 Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001GraphQL \u306e API \u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092 GraphQL \u30b5\u30fc\u30d0\u30fc\u306b\u63a5\u7d9a\u3057\u307e\u3059\u3002 and \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>ApolloClient<\/code><code>createHttpLink<\/code><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">jsCopy code<code>import { ApolloClient } from 'apollo-client';\nimport { createHttpLink } from 'apollo-link-http';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\n\nconst httpLink = createHttpLink({\n  uri: 'http:\/\/localhost:4000\/graphql',\n});\n\nconst client = new ApolloClient({\n  link: httpLink,\n  cache: new InMemoryCache(),\n});\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>\u30af\u30a8\u30ea\u306e\u4f5c\u6210: \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001React \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 GraphQL \u30af\u30a8\u30ea\u3092\u5b9f\u884c\u3057\u3001\u30af\u30a8\u30ea\u7d50\u679c\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<code>useQuery<\/code><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">jsCopy code<code>import { useQuery } from '@apollo\/react-hooks';\nimport gql from 'graphql-tag';\n\nconst GET_POSTS = gql`\n  query {\n    posts {\n      title\n      content\n      author {\n        name\n      }\n    }\n  }\n`;\n\nfunction Posts() {\n  const { loading, error, data } = useQuery(GET_POSTS);\n\n  if (loading) return &lt;p&gt;Loading...&lt;\/p&gt;;\n  if (error) return &lt;p&gt;Error :(&lt;\/p&gt;;\n\n  return (\n    &lt;div&gt;\n      {data.posts.map((post) =&gt; (\n        &lt;div key={post.title}&gt;\n          &lt;h2&gt;{post.title}&lt;\/h2&gt;\n          &lt;p&gt;{post.content}&lt;\/p&gt;\n          &lt;p&gt;By {post.author.name}&lt;\/p&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b: \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066 React \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 GraphQL \u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u3001\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306e\u7d50\u679c\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<code>useMutation<\/code><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">jsCopy code<code>import { useMutation } from '@apollo\/react-hooks';\nimport gql from 'graphql-tag';\n\nconst ADD_POST = gql`\n  mutation AddPost($title: String!, $content: String!, $author: String!) {\n    addPost(title: $title, content: $content, author: $author) {\n      title\n      content\n      author {\n        name\n      }\n    }\n  }\n`;\n\nfunction AddPostForm() {\n  const [addPost, { data }] = useMutation(ADD_POST);\n\n  const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    addPost({\n      variables: {\n        title: formData.get('title'),\n        content: formData.get('content'),\n        author: formData.get('author'),\n      },\n    });\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;input type=\"text\" name=\"title\" placeholder=\"Title\" \/&gt;\n      &lt;textarea name=\"content\" placeholder=\"Content\"&gt;&lt;\/textarea&gt;\n      &lt;input type=\"text\" name=\"author\" placeholder=\"Author\" \/&gt;\n      &lt;button type=\"submit\"&gt;Add Post&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>GraphQL \u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b: GraphQL \u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30af\u30a8\u30ea\u7d50\u679c\u3092\u518d\u5229\u7528\u3057\u3001\u30b3\u30fc\u30c9\u306e\u91cd\u8907\u3092\u6e1b\u3089\u3057\u307e\u3059\u3002 GraphQL \u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u4e00\u822c\u7684\u306a\u30af\u30a8\u30ea\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u5b9a\u7fa9\u3057\u3001\u305d\u308c\u3089\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u5225\u306e\u30af\u30a8\u30ea\u3067\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">jsCopy code<code>import { useQuery } from '@apollo\/react-hooks';\nimport gql from 'graphql-tag';\n\nconst POST_FRAGMENT = gql`\n  fragment PostFragment on Post {\n    title\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>React \u30d5\u30c3\u30af\u3068 GraphQL \u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u53d6\u5f97\u3068\u72b6\u614b\u7ba1\u7406\u3092\u5b9f\u88c5\u3059\u308b\u30d7\u30ed\u30bb\u30b9\u306b\u306f\u3001\u901a\u5e38\u3001\u6b21\u306e\u624b\u9806\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>GraphQL \u30af\u30a8\u30ea\u3092\u5b9a\u7fa9\u3059\u308b: \u307e\u305a\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b GraphQL \u30af\u30a8\u30ea\u3092\u5b9a\u7fa9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u306e\u30af\u30a8\u30ea\u306f\u3001GraphQL \u30d5\u30a1\u30a4\u30eb\u3067\u5b9a\u7fa9\u3059\u308b\u304b\u3001GraphQL \u6587\u5b57\u5217\u3068\u3057\u3066 Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u76f4\u63a5\u6e21\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>useQuery \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b: \u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u306b\u306f\u3001React \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 useQuery \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002 \u30d5\u30c3\u30af\u306f\u3001\u30af\u30a8\u30ea\u3068\u3001\u5909\u6570\u3084\u30ad\u30e3\u30c3\u30b7\u30e5\u30dd\u30ea\u30b7\u30fc\u306a\u3069\u306e\u3044\u304f\u3064\u304b\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6e21\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 useQuery \u306f\u3001\u30af\u30a8\u30ea\u7d50\u679c\u3068\u3001\u8aad\u307f\u8fbc\u307f\u30b9\u30c6\u30fc\u30bf\u30b9\u3084\u30a8\u30e9\u30fc\u60c5\u5831\u306a\u3069\u306e\u30af\u30a8\u30ea\u72b6\u614b\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u542b\u3080\u30c7\u30fc\u30bf \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0: \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u8fd4\u3055\u308c\u305f\u30c7\u30fc\u30bf\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3057\u3066\u3001\u76ee\u7684\u306e UI \u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002 \u3053\u308c\u306b\u306f\u901a\u5e38\u3001\u6761\u4ef6\u4ed8\u304d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u4f7f\u7528\u3057\u3066\u3001\u8aad\u307f\u8fbc\u307f\u72b6\u614b\u3001\u30a8\u30e9\u30fc\u72b6\u614b\u3001\u30c7\u30fc\u30bf\u306e\u53ef\u7528\u6027\u72b6\u614b\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30af\u30a8\u30ea\u72b6\u614b\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>useMutation \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u5909\u66f4\u3092\u5b9f\u884c\u3059\u308b: \u30c7\u30fc\u30bf\u3092\u66f4\u65b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306f\u3001useMutation \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u5909\u66f4\u30aa\u30da\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u30d5\u30c3\u30af\u306f\u5909\u66f4\u64cd\u4f5c\u3092\u53d7\u3051\u53d6\u308a\u3001\u5909\u66f4\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u308b\u95a2\u6570\u3092\u8fd4\u3057\u307e\u3059\u3002 \u901a\u5e38\u3001\u3053\u306e\u95a2\u6570\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30d5\u30a9\u30fc\u30e0\u3092\u9001\u4fe1\u3059\u308b\u3068\u304d\u306b\u5909\u66f4\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u3001\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u30cf\u30f3\u30c9\u30e9\u30fc\u306b\u6e21\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30e1\u30ab\u30cb\u30ba\u30e0\u3092\u4f7f\u7528\u3059\u308b: Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u306e\u306b\u5f79\u7acb\u3064\u30ad\u30e3\u30c3\u30b7\u30e5\u30e1\u30ab\u30cb\u30ba\u30e0\u304c\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u3059\u3002 Apollo Client \u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4f7f\u7528\u3059\u308b\u304b\u3069\u3046\u304b\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u6642\u9593\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3055\u308c\u305f\u30c7\u30fc\u30bf\u306e\u30b5\u30a4\u30ba\u306a\u3069\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30dd\u30ea\u30b7\u30fc\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u52d5\u4f5c\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u30c7\u30fc\u30bf\u53d6\u308a\u8fbc\u307f\u3068\u72b6\u614b\u7ba1\u7406\u306b React \u30d5\u30c3\u30af\u3068 GraphQL \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001React \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u30c7\u30fc\u30bf\u51e6\u7406\u3068\u72b6\u614b\u7ba1\u7406\u3092\u7c21\u7d20\u5316\u3067\u304d\u307e\u3059\u3002 Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u95a2\u9023\u3059\u308b\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30c7\u30fc\u30bf\u3068\u72b6\u614b\u306e\u7ba1\u7406\u304c\u5bb9\u6613\u306b\u306a\u308a\u3001GraphQL API \u304b\u3089\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u306e\u304c\u3088\u308a\u52b9\u7387\u7684\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306e\u30a8\u30e9\u30fc\u51e6\u7406\u3068\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u306e\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u4e2d\u306b\u3001\u69cb\u6587\u30a8\u30e9\u30fc\u3001\u30af\u30a8\u30ea\u30a8\u30e9\u30fc\u3001\u5b9f\u884c\u30a8\u30e9\u30fc\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30a8\u30e9\u30fc\u3092\u52b9\u679c\u7684\u306b\u30c7\u30d0\u30c3\u30b0\u3057\u3066\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u3001\u5f79\u7acb\u3064\u30d2\u30f3\u30c8\u3068\u30c4\u30fc\u30eb\u304c\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>GraphQL Playground \u3092\u4f7f\u7528\u3059\u308b: GraphQL Playground \u306f\u3001GraphQL API \u306e\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0\u306b\u4f7f\u7528\u3067\u304d\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a GraphQL IDE \u3067\u3059\u3002 GraphQL \u30d7\u30ec\u30a4\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u306f\u3001GraphQL \u30af\u30a8\u30ea\u3001\u5909\u66f4\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u3092\u5165\u529b\u3057\u3001\u305d\u306e\u7d50\u679c\u3068\u30a8\u30e9\u30fc\u3092\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u51e6\u7406\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u4f7f\u7528\u3059\u308b: GraphQL API \u3067\u306f\u3001\u30a8\u30e9\u30fc\u3092\u30ad\u30e3\u30c3\u30c1\u3057\u3066\u51e6\u7406\u3059\u308b\u30a8\u30e9\u30fc\u51e6\u7406\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 \u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u306f\u3001\u30a8\u30e9\u30fc \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u30ed\u30b0\u306b\u8a18\u9332\u3057\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u30a8\u30e9\u30fc\u5fdc\u7b54\u3092\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u8fd4\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u304c\u5411\u4e0a\u3057\u3001API\u306e\u5931\u6557\u7387\u304c\u6e1b\u5c11\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>GraphQL \u30af\u30a8\u30ea\u69cb\u6587\u3092\u78ba\u8a8d\u3059\u308b: GraphQL \u30af\u30a8\u30ea\u69cb\u6587\u306f\u6bd4\u8f03\u7684\u8907\u96d1\u3067\u3001\u69cb\u6587\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002 GraphQL \u306e\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001GraphQL \u30af\u30a8\u30ea\u306e\u69cb\u6587\u306e\u6b63\u78ba\u6027\u3092\u691c\u8a3c\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001graphql-js \u30d1\u30c3\u30b1\u30fc\u30b8\u306e validate \u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30af\u30a8\u30ea\u306e\u69cb\u6587\u3092\u691c\u8a3c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c7\u30d0\u30c3\u30ac\u30fc\u3092\u4f7f\u7528\u3059\u308b: \u30c7\u30d0\u30c3\u30ac\u30fc\u3092\u4f7f\u7528\u3057\u3066 GraphQL API \u3092\u30c7\u30d0\u30c3\u30b0\u3057\u3001\u30af\u30a8\u30ea\u5b9f\u884c\u306e\u30d7\u30ed\u30bb\u30b9\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\u3057\u3001\u30a8\u30e9\u30fc\u3092\u898b\u3064\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001Apollo Server \u306e debug \u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30d0\u30c3\u30b0 \u30e2\u30fc\u30c9\u3092\u6709\u52b9\u306b\u3057\u3001VS Code \u306e\u30c7\u30d0\u30c3\u30ac\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30d0\u30c3\u30b0\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u306e\u30ad\u30e3\u30c3\u30c1\u3068\u30ed\u30b0\u8a18\u9332: GraphQL API \u3067\u306f\u3001try-catch \u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u5b9f\u884c\u30a8\u30e9\u30fc\u3092\u30ad\u30e3\u30c3\u30c1\u3057\u3001\u30ed\u30b0\u306b\u8a18\u9332\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306f\u3001API\u306e\u30d0\u30b0\u3084\u969c\u5bb3\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\u3057\u3001\u30bf\u30a4\u30e0\u30ea\u30fc\u306b\u5bfe\u51e6\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n\n\n\n<li>GraphQL \u30a8\u30e9\u30fc\u30bf\u30a4\u30d7\u306e\u4f7f\u7528: GraphQL \u306b\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u30bf\u30a4\u30d7\u306e\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u3044\u304f\u3064\u304b\u306e\u30a8\u30e9\u30fc\u30bf\u30a4\u30d7\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001GraphQLError \u30bf\u30a4\u30d7\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30af\u30a8\u30ea\u306e\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3057\u3001UserInputError \u30bf\u30a4\u30d7\u3092\u4f7f\u7528\u3057\u3066\u30e6\u30fc\u30b6\u30fc\u5165\u529b\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3057\u3001\u8a8d\u8a3c\u30a8\u30e9\u30fc\u30bf\u30a4\u30d7\u3092\u4f7f\u7528\u3057\u3066\u8a8d\u8a3c\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u9069\u5207\u306a\u30a8\u30e9\u30fc\u51e6\u7406\u3068\u30c7\u30d0\u30c3\u30b0\u306e\u30b9\u30ad\u30eb\u304c\u3042\u308c\u3070\u3001GraphQL API \u306e\u30a8\u30e9\u30fc\u3068\u5931\u6557\u3092\u3088\u308a\u9069\u5207\u306b\u51e6\u7406\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fe1\u983c\u6027\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u3092\u4f7f\u7528\u3057\u305f\u30e9\u30a4\u30d6\u30af\u30a8\u30ea\u3068\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u30e9\u30a4\u30d6\u30af\u30a8\u30ea\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u30dd\u30fc\u30ea\u30f3\u30b0\u306a\u3057\u3067\u30b5\u30fc\u30d0\u30fc\u5074\u306e\u30c7\u30fc\u30bf\u66f4\u65b0\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30e6\u30fc\u30b6\u30fc \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u304c\u5927\u5e45\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>GraphQL \u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30af\u30a8\u30ea\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u306f WebSocket \u30d7\u30ed\u30c8\u30b3\u30eb\u306b\u57fa\u3065\u3044\u3066\u304a\u308a\u3001WebSocket \u63a5\u7d9a\u3092\u78ba\u7acb\u3059\u308b\u3053\u3068\u3067\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u30c7\u30fc\u30bf\u306e\u66f4\u65b0\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u30d7\u30c3\u30b7\u30e5\u3067\u304d\u307e\u3059\u3002 GraphQL \u306e\u30e9\u30a4\u30d6\u30af\u30a8\u30ea\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b\u4e00\u822c\u7684\u306a\u624b\u9806\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>GraphQL API \u306b\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b: GraphQL API \u3067\u306f\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u30bf\u30a4\u30d7\u3068\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u30ea\u30be\u30eb\u30d0\u30fc\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u306e\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3067 WebSocket \u63a5\u7d9a\u3092\u78ba\u7acb\u3059\u308b: \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u306f\u3001WebSocket API \u307e\u305f\u306f Apollo Client \u306a\u3069\u306e GraphQL \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001GraphQL API \u3078\u306e WebSocket \u63a5\u7d9a\u3092\u78ba\u7acb\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u8981\u6c42\u306e\u9001\u4fe1: \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u8981\u6c42\u3092\u9001\u4fe1\u3057\u3066\u3001\u7279\u5b9a\u306e\u30c7\u30fc\u30bf\u66f4\u65b0\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3067\u304d\u307e\u3059\u3002 \u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u5f62\u5f0f\u306f GraphQL \u30af\u30a8\u30ea\u30b9\u30c6\u30fc\u30c8\u30e1\u30f3\u30c8\u306b\u4f3c\u3066\u3044\u307e\u3059\u304c\u3001\u300c\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u300d\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u7d50\u679c\u306e\u51e6\u7406: \u30b5\u30fc\u30d0\u30fc\u5074\u3067\u30c7\u30fc\u30bf\u304c\u66f4\u65b0\u3055\u308c\u308b\u3068\u3001\u30b5\u30fc\u30d0\u30fc\u306f WebSocket \u63a5\u7d9a\u3092\u4ecb\u3057\u3066\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u66f4\u65b0\u3092\u30d7\u30c3\u30b7\u30e5\u3057\u307e\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u3053\u308c\u3089\u306e\u66f4\u65b0\u3092\u51e6\u7406\u3057\u3001\u30c7\u30fc\u30bf\u306e\u5909\u66f4\u3092\u53cd\u6620\u3059\u308b\u3088\u3046\u306b UI \u3092\u66f4\u65b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Apollo \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u3066 GraphQL \u30e9\u30a4\u30d6\u30af\u30a8\u30ea\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>import React from 'react';\nimport { useSubscription } from '@apollo\/client';\nimport gql from 'graphql-tag';\n\nconst MESSAGE_SUBSCRIPTION = gql`\n  subscription OnMessageAdded {\n    messageAdded {\n      id\n      content\n      createdAt\n    }\n  }\n`;\n\nfunction MessageList() {\n  const { data, loading } = useSubscription(MESSAGE_SUBSCRIPTION);\n\n  if (loading) return &lt;p&gt;Loading...&lt;\/p&gt;;\n\n  return (\n    &lt;div&gt;\n      {data.messageAdded.map((message) =&gt; (\n        &lt;div key={message.id}&gt;\n          &lt;p&gt;{message.content}&lt;\/p&gt;\n          &lt;p&gt;{message.createdAt}&lt;\/p&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001&#8221;messageAdded&#8221; \u30a4\u30d9\u30f3\u30c8\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3059\u308b MESSAGE_SUBSCRIPTION \u3068\u3044\u3046\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u8981\u6c42\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 useSubscription \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u306e\u7d50\u679c\u3092\u51e6\u7406\u3057\u307e\u3059\u3002 \u30b5\u30fc\u30d0\u30fc\u5074\u3067\u30c7\u30fc\u30bf\u304c\u66f4\u65b0\u3055\u308c\u308b\u3068\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u81ea\u52d5\u7684\u306b\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3001\u66f4\u65b0\u3055\u308c\u305f\u30c7\u30fc\u30bf\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u8981\u7d04\u3059\u308b\u3068\u3001GraphQL \u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30af\u30a8\u30ea\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u6a5f\u80fd\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5927\u5e45\u306b\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 WebSocket \u30d7\u30ed\u30c8\u30b3\u30eb\u3068\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u30c7\u30fc\u30bf\u66f4\u65b0\u3092\u7c21\u5358\u306b\u5b9f\u73fe\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u52d5\u7684\u6027\u3068\u5fdc\u7b54\u6027\u3092\u9ad8\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>GraphQL\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30ad\u30e3\u30c3\u30b7\u30f3\u30b0\u30c6\u30af\u30cb\u30c3\u30af\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>GraphQL \u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30ad\u30e3\u30c3\u30b7\u30e5\u624b\u6cd5\u306f\u3001\u30af\u30a8\u30ea\u306e\u52b9\u7387\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u78ba\u4fdd\u3059\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u624b\u6bb5\u3067\u3042\u308a\u3001\u4e00\u822c\u7684\u306a\u30d2\u30f3\u30c8\u3068\u63a8\u5968\u4e8b\u9805\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30af\u30a8\u30ea\u306e\u6df1\u3055\u3068\u8907\u96d1\u3055\u3092\u5236\u9650\u3059\u308b: GraphQL \u30af\u30a8\u30ea\u306b\u306f\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a3\u30fc\u30eb\u30c9\u3068\u95a2\u9023\u4ed8\u3051\u3092\u542b\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u304c\u3001\u30af\u30a8\u30ea\u306e\u6df1\u3055\u3068\u8907\u96d1\u3055\u304c\u9ad8\u3059\u304e\u308b\u3068\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u4f4e\u4e0b\u3057\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u30b9\u30ad\u30fc\u30de\u3067\u6700\u5927\u30af\u30a8\u30ea\u306e\u6df1\u3055\u3068\u30af\u30a8\u30ea\u306e\u8907\u96d1\u3055\u306e\u5236\u9650\u3092\u8a2d\u5b9a\u3057\u3001graphql-depth-limit \u306a\u3069\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30af\u30a8\u30ea\u6642\u306b\u30af\u30a8\u30ea\u304c\u6e96\u62e0\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>DataLoader \u3092\u4f7f\u7528\u3057\u305f\u4e00\u62ec\u30af\u30a8\u30ea: GraphQL \u30af\u30a8\u30ea\u306b\u306f\u591a\u6570\u306e\u91cd\u8907\u30c7\u30fc\u30bf\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u542b\u307e\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002 DataLoader \u3092\u4f7f\u7528\u3057\u3066\u3001\u30af\u30a8\u30ea\u7d50\u679c\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3001\u30af\u30a8\u30ea\u306e\u91cd\u8907\u3092\u56de\u907f\u3057\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4f7f\u7528\u3059\u308b: \u30af\u30a8\u30ea\u7d50\u679c\u306e\u5909\u66f4\u983b\u5ea6\u304c\u4f4e\u3044\u30c7\u30fc\u30bf\u306e\u5834\u5408\u306f\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u624b\u6cd5\u3092\u4f7f\u7528\u3057\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001Redis \u306a\u3069\u306e\u30ad\u30e3\u30c3\u30b7\u30e5 \u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u30af\u30a8\u30ea\u7d50\u679c\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3001\u30af\u30a8\u30ea\u3054\u3068\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30da\u30fc\u30b8\u30f3\u30b0\u3068\u30af\u30a8\u30ea\u7d50\u679c\u306e\u5236\u9650\u3092\u4f7f\u7528\u3059\u308b: \u5927\u91cf\u306e\u30c7\u30fc\u30bf\u3092\u542b\u3080\u30af\u30a8\u30ea\u306e\u5834\u5408\u306f\u3001\u4e00\u5ea6\u306b\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u5f15\u304d\u8d77\u3053\u3055\u308c\u308b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u554f\u984c\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u306b\u3001\u30da\u30fc\u30b8\u30f3\u30b0\u624b\u6cd5\u3092\u4f7f\u7528\u3057\u3001\u30af\u30a8\u30ea\u7d50\u679c\u306e\u6570\u3092\u5236\u9650\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d0\u30c3\u30c1\u51e6\u7406\u3092\u4f7f\u7528\u3059\u308b: \u30d0\u30c3\u30c1\u51e6\u7406\u3092\u5fc5\u8981\u3068\u3059\u308b\u30c7\u30fc\u30bf\u64cd\u4f5c\u3067\u306f\u3001\u30d0\u30c3\u30c1\u51e6\u7406\u624b\u6cd5\u3092\u4f7f\u7528\u3057\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001\u8907\u6570\u306e\u30af\u30a8\u30ea\u307e\u305f\u306f\u5909\u66f4\u64cd\u4f5c\u3092\u307e\u3068\u3081\u3066\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1\u3057\u3066\u51e6\u7406\u3067\u304d\u308b\u305f\u3081\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u8ee2\u9001\u306e\u6570\u3068\u30b5\u30fc\u30d0\u30fc\u306e\u8ca0\u8377\u3092\u8efd\u6e1b\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u6c38\u7d9a\u7684\u306a\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3059\u308b: \u30af\u30a8\u30ea\u7d50\u679c\u304c\u983b\u7e41\u306b\u5909\u66f4\u3055\u308c\u308b\u30af\u30a8\u30ea\u306e\u5834\u5408\u306f\u3001\u6c38\u7d9a\u7684\u306a\u30af\u30a8\u30ea \u30c6\u30af\u30ce\u30ed\u30b8\u3092\u4f7f\u7528\u3057\u3066\u30af\u30a8\u30ea\u7d50\u679c\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3001\u6bce\u56de\u7d50\u679c\u3092\u518d\u8a08\u7b97\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u30a6\u30a9\u30fc\u30e0\u30a2\u30c3\u30d7\u3092\u4f7f\u7528\u3059\u308b: \u30b7\u30b9\u30c6\u30e0\u306e\u8d77\u52d5\u6642\u306b\u3001\u983b\u7e41\u306b\u4f7f\u7528\u3055\u308c\u308b\u30af\u30a8\u30ea\u7d50\u679c\u3092\u4e8b\u524d\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u306b\u30ed\u30fc\u30c9\u3057\u3066\u3001\u5f8c\u7d9a\u306e\u30af\u30a8\u30ea\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u3064\u307e\u308a\u3001GraphQL\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30ad\u30e3\u30c3\u30b7\u30e5\u30b9\u30ad\u30eb\u306f\u3001\u30c7\u30fc\u30bf\u91cf\u3001\u30af\u30a8\u30ea\u306e\u8907\u96d1\u3055\u3001\u30c7\u30fc\u30bf\u5909\u66f4\u983b\u5ea6\u306a\u3069\u306e\u8981\u56e0\u3092\u5305\u62ec\u7684\u306b\u8003\u616e\u3057\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u9069\u5207\u306a\u6280\u8853\u7684\u624b\u6bb5\u3092\u63a1\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/edu.ujhb.org\/?p=800\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chat.openai.com\/_next\/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxbwVdnTP0E2eBqDrujRQjV-wFP12Thr4vFgysVv5A%3Ds96-c&amp;w=64&amp;q=75\" alt=\"gun tei\"\/><\/figure>\n\n\n\n<p>Github\u306e\u512a\u308c\u305fGraghQL\u30d9\u30fc\u30b9\u306e\u30b7\u30b9\u30c6\u30e0\u306f\u4f55\u3067\u3059\u304b<\/p>\n\n\n\n<p>\u512a\u308c\u305f GraphQL \u30d9\u30fc\u30b9\u306e\u30b7\u30b9\u30c6\u30e0\u3068\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>GitHub \u2013 GitHub API \u306f GraphQL \u30d9\u30fc\u30b9\u306e API \u3067\u3042\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306f GraphQL \u3092\u4ecb\u3057\u3066 GitHub \u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u304a\u3088\u3073\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>Shopify \u2013 Shopify GraphQL\u3092\u4f7f\u7528\u3057\u3066\u3001e\u30b3\u30de\u30fc\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u304a\u3088\u3073\u5909\u66f4\u3057\u307e\u3059\u3002 \u307e\u305f\u3001GraphQL\u30af\u30a8\u30ea\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u9069\u5316\u3059\u308bgraphql-batch\u3068\u3044\u3046\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li>Coursera \u2013 Coursera\u306f\u3001GraphQL\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u304a\u3088\u3073\u5909\u66f4\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u5b66\u7fd2\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002 \u307e\u305f\u3001GraphQL\u30b9\u30ad\u30fc\u30de\u3092\u69cb\u7bc9\u304a\u3088\u3073\u7dad\u6301\u3059\u308b\u305f\u3081\u306b\u3001databuilder\u3068\u547c\u3070\u308c\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u5316\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li>Yelp \u2013 Yelp \u306f API \u30ec\u30a4\u30e4\u30fc\u3068\u3057\u3066 GraphQL \u3092\u4f7f\u7528\u3057\u3001\u4ed6\u306e\u4eba\u304c\u72ec\u81ea\u306e GraphQL API \u3092\u69cb\u7bc9\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064 graphql-yelp \u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u5316\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li>Facebook \u2013 Facebook \u306f GraphQL \u3092\u4f5c\u6210\u3057\u3001GraphQL \u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u306e\u30af\u30a8\u30ea\u3068\u5909\u66f4\u3082\u884c\u3063\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30cb\u30e5\u30fc\u30e8\u30fc\u30af\u30bf\u30a4\u30e0\u30ba \u2013 \u30cb\u30e5\u30fc\u30e8\u30fc\u30af\u30bf\u30a4\u30e0\u30ba\u306f\u3001GraphQL\u3092\u4f7f\u7528\u3057\u3066\u8a18\u4e8b\u3068\u95a2\u9023\u30c7\u30fc\u30bf\u3092\u30af\u30a8\u30ea\u304a\u3088\u3073\u5909\u66f4\u3057\u3001\u8907\u6570\u306e\u30c7\u30d0\u30a4\u30b9\u3084\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u7c21\u5358\u306b\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306f\u3059\u3079\u3066GraphQL\u306b\u57fa\u3065\u304f\u512a\u308c\u305f\u30b7\u30b9\u30c6\u30e0\u3068\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3059\u304c\u3001\u305d\u308c\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002 GraphQL\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u7d76\u3048\u305a\u62e1\u5927\u3057\u3066\u304a\u308a\u3001\u5c06\u6765\u7684\u306b\u306f\u3055\u3089\u306b\u591a\u304f\u306e\u30b7\u30b9\u30c6\u30e0\u3084\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304cGraphQL\u4e0a\u306b\u69cb\u7bc9\u3055\u308c\u308b\u4e88\u5b9a\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IT\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30d3\u30c7\u30aa\u3092\u3084\u308a\u305f\u3044\u306e\u3067 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-1060","post","type-post","status-publish","format-standard","hentry","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/1060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1060"}],"version-history":[{"count":1,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/1060\/revisions"}],"predecessor-version":[{"id":1061,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/1060\/revisions\/1061"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}