{"id":11922,"date":"2023-03-14T00:34:55","date_gmt":"2023-03-13T21:04:55","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/"},"modified":"2023-03-14T00:34:55","modified_gmt":"2023-03-13T21:04:55","slug":"how-woovi-uses-relay-1iic","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/","title":{"rendered":"Woovi \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 Relay \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u061f  &#8211; \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"<div data-article-id=\"1398236\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%B1%D9%84%D9%87_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0631\u0644\u0647 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%B1%D9%84%D9%87\" >\u0645\u0639\u0645\u0627\u0631\u06cc \u0631\u0644\u0647<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%DA%A9%D8%A7%D9%85%D9%BE%D8%A7%DB%8C%D9%84%D8%B1_%D8%B1%D9%84%D9%87\" >\u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0631\u0644\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#babel-plugin-relay\" >babel-plugin-relay<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1_%D8%AA%D8%B3%D8%AA_%D8%B1%D9%84%D9%87\" >\u0627\u0628\u0632\u0627\u0631 \u062a\u0633\u062a \u0631\u0644\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%B2%D9%85%D8%A7%D9%86_%D8%A7%D8%AC%D8%B1%D8%A7_%D8%B1%D9%84%D9%87\" >\u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0631\u0644\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%B1%D9%84%D9%87_%D9%88%D8%A7%DA%A9%D9%86%D8%B4\" >\u0631\u0644\u0647 \u0648\u0627\u06a9\u0646\u0634<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%B1%D9%86%D8%AF%D8%B1_%D8%AC%D8%B2%D8%A6%DB%8C\" >\u0631\u0646\u062f\u0631 \u062c\u0632\u0626\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%B1%D9%84%D9%87_%D8%AF%D8%B1_Backend\" >\u0631\u0644\u0647 \u062f\u0631 Backend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%B1%D9%84%D9%87_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%D8%AF%D8%B1_Woovi\" >\u0631\u0644\u0647 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 Woovi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%D8%AF%D8%B1_%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u062f\u0631 \u0646\u062a\u06cc\u062c\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/how-woovi-uses-relay-1iic\/#%DA%A9%D8%A7%D8%B1%DA%AF%D8%A7%D9%87_%D8%B1%D9%84%D9%87\" >\u06a9\u0627\u0631\u06af\u0627\u0647 \u0631\u0644\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%84%D9%87_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0631\u0644\u0647 \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0628\u0647 relay.dev \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u062f\u060c Relay \u06a9\u0644\u0627\u06cc\u0646\u062a GraphQL \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0634\u0645\u0627 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u0648 Relay \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0642\u0628\u0644 \u0647\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 Relay \u0628\u0647 \u062c\u062f\u0648\u0644 \u0645\u06cc\u200c\u0622\u0648\u0631\u062f \u0645\u06cc\u200c\u062f\u0627\u0646\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u0647\u0646\u0648\u0632 \u0627\u0632 Relay \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06cc\u0627 \u0647\u0646\u0648\u0632 \u062a\u0645\u0627\u0645 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Relay \u0631\u0627 \u062f\u0631\u06a9 \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 Woovi \u0627\u0632 Relay \u0628\u0631\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633\u200c\u0628\u0646\u062f\u06cc backend \u0648 frontend \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%B1%D9%84%D9%87\"><\/span>\n<p>  \u0645\u0639\u0645\u0627\u0631\u06cc \u0631\u0644\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0631\u0644\u0647 \u062a\u0648\u0633\u0637 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631\u06a9 \u0647\u0631 \u0628\u0633\u062a\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062f\u0631\u06a9 \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f Relay \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D9%85%D9%BE%D8%A7%DB%8C%D9%84%D8%B1_%D8%B1%D9%84%D9%87\"><\/span>\n<p>  \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0631\u0644\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Relay Compiler \u062a\u0645\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a GraphQL (\u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627\u060c \u062c\u0647\u0634 \u0647\u0627\u060c \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627) \u0648 \u0642\u0637\u0639\u0627\u062a \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0646\u062f.  \u0622\u0646 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647\u060c \u062a\u0628\u062f\u06cc\u0644 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062a\u0628\u062f\u06cc\u0644\u200c\u0647\u0627\u06cc Relay Compiler \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 Relay Compiler Repl \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 Relay Compiler Explorer \u062c\u062f\u06cc\u062f \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f<\/p>\n<p>\u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0631\u0644\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0642\u0637\u0639\u0627\u062a GraphQL \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 \u0633\u0637\u062d \u0642\u0637\u0639\u0647 \u067e\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 GraphQL \u0647\u0646\u0648\u0632 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u062f\u0631 \u0633\u0637\u062d \u0642\u0637\u0639\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>Relay Compiler \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u060c \u0634\u0645\u0627 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u062c\u0633\u062a\u062c\u0648\u06cc \u0634\u06a9\u0633\u062a\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f\u060c \u062d\u062a\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u062e\u0631\u0648\u062c\u06cc \u0627\u06cc\u0646 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0627\u0632 AST \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0631\u0648\u06cc \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f <code>__generated__<\/code> \u067e\u0648\u0634\u0647 \u0647\u0627  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f GraphQL AST \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 AST Explorer \u06a9\u0627\u0648\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"babel-plugin-relay\"><\/span>\n<p>  babel-plugin-relay<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Relay \u06cc\u06a9 \u067e\u0644\u0627\u06af\u06cc\u0646 babel \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0622\u0646 \u0645\u06cc \u0634\u0648\u062f <code>graphql<\/code> \u0628\u0631\u0686\u0633\u0628 \u0628\u0631\u0627\u06cc \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 Relay Compiler \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062a\u062d\u0648\u0644 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useFragment<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">graphql<\/span><span class=\"s2\">`\n      fragment App_user on User {\n        app\n      }\n    `<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0628\u062f\u06cc\u0644 \u0628\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useFragment<\/span><span class=\"p\">(<\/span><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/__generated__\/App_user.graphql.ts<\/span><span class=\"dl\">'<\/span><span class=\"p\">),<\/span>\n    <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1_%D8%AA%D8%B3%D8%AA_%D8%B1%D9%84%D9%87\"><\/span>\n<p>  \u0627\u0628\u0632\u0627\u0631 \u062a\u0633\u062a \u0631\u0644\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u0627\u0632 Relay Test Utils \u062f\u0631 \u062a\u0633\u062a \u0647\u0627\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u062f \u062f\u0631 frontend \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0633\u062e\u0631\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062d\u06cc\u0637 Relay \u0648 \u0647\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u06cc\u0627 \u0641\u06cc\u0644\u062f GraphQL \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u062d\u0644\u200c\u06a9\u0646\u0646\u062f\u0647 \u0633\u0627\u062e\u062a\u06af\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0633\u062a \u0631\u0644\u0647 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u0647\u0645\u0647 \u0631\u0627 \u0645\u0633\u062e\u0631\u0647 \u06a9\u0646\u0646\u062f <code>User<\/code> \u0628\u0631\u0627\u06cc \u062f\u0627\u0634\u062a\u0646 \u0646\u0627\u0645 <code>Woovi<\/code>.  \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u0644 \u0639\u0645\u0644\u06cc\u0627\u062a GraphQL \u0631\u0627 \u0645\u0633\u062e\u0631\u0647 \u06a9\u0646\u0645\u060c \u0641\u0642\u0637 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u0645\u0646 \u0645\u0639\u0646\u06cc \u062f\u0627\u0631\u0646\u062f.  \u062a\u0639\u062f\u0627\u062f \u0648\u0633\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">mockResolver<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n   <span class=\"na\">User<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Woovi<\/span><span class=\"dl\">'<\/span><span class=\"p\">}),<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B2%D9%85%D8%A7%D9%86_%D8%A7%D8%AC%D8%B1%D8%A7_%D8%B1%D9%84%D9%87\"><\/span>\n<p>  \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0631\u0644\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Relay Runtime \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc Relay \u0627\u0633\u062a.  \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 (\u0644\u0627\u06cc\u0647 \u0634\u0628\u06a9\u0647) \u062a\u0648\u0633\u0637 Relay \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0648 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 Relay \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u062c\u0647\u0634 \u0647\u0627 \u0648 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f Relay \u0631\u0627 \u0628\u0647 angular \u06cc\u0627 vue \u067e\u0648\u0631\u062a \u06a9\u0646\u06cc\u062f\u060c \u0641\u0642\u0637 Relay Runtime \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%84%D9%87_%D9%88%D8%A7%DA%A9%D9%86%D8%B4\"><\/span>\n<p>  \u0631\u0644\u0647 \u0648\u0627\u06a9\u0646\u0634<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0627\u062a\u0635\u0627\u0644\u0627\u062a React \u0628\u0631\u0627\u06cc Relay Runtime \u0627\u0633\u062a.<br \/>\u0627\u0632 \u0632\u0645\u0627\u0646 Relay Classic \u0628\u0647 Relay Modern \u0628\u0633\u06cc\u0627\u0631 \u062a\u06a9\u0627\u0645\u0644 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a \u0648 \u0627\u06a9\u0646\u0648\u0646 Relay Hooks \u0628\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 Suspense \u0648 \u0631\u0646\u062f\u0631 \u062f\u0631 \u062d\u06cc\u0646 \u0648\u0627\u06a9\u0634\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0642\u0644\u0627\u0628 \u0631\u0644\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 DX \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. <code>useFragment<\/code> \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f \u0627\u0639\u0644\u0627\u0645 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u0628\u0647 \u0686\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f\u060c \u0648 Relay \u0645\u062a\u0648\u062c\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0628\u0647 \u0622\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u06cc\u0627\u0648\u0631\u062f\u061f  \u0627\u0632 \u0634\u0628\u06a9\u0647\u061f  \u0634\u0645\u0627 \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u0628\u0647 \u0622\u0646 \u0627\u0647\u0645\u06cc\u062a \u062f\u0647\u06cc\u062f<\/p>\n<p><code>useMutation<\/code>  \u062c\u0647\u0634\u200c\u0647\u0627\u06cc GraphQL \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0648\u0628\u0627\u0631 \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0648 \u0628\u0627\u0631 \u06cc\u0627 \u0628\u06cc\u0634\u062a\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0641\u0631\u0645 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0646\u06af\u0631\u0627\u0646 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%86%D8%AF%D8%B1_%D8%AC%D8%B2%D8%A6%DB%8C\"><\/span>\n<p>  \u0631\u0646\u062f\u0631 \u062c\u0632\u0626\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f Relay \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0634\u0645\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u0632\u0626\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"p\">&lt;&gt;<\/span>\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">PostTitle<\/span> <span class=\"na\">post<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">Suspense<\/span><span class=\"p\">&gt;<\/span>\n     <span class=\"p\">&lt;<\/span><span class=\"nc\">PostComments<\/span> <span class=\"na\">post<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n  <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Suspense<\/span><span class=\"p\">&gt;<\/span>\n<span class=\"p\">&lt;\/&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0642\u0628\u0644\u0627 \u062f\u0627\u0631\u06cc\u062f <code>post.title<\/code> \u062f\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 Relay \u062e\u0648\u062f\u060c \u0627\u0645\u0627 \u0646\u062f\u0627\u0631\u06cc\u062f <code>post.comments<\/code>. <br \/>\u0631\u0644\u0647 \u0642\u0627\u062f\u0631 \u0628\u0647 \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f <code>&lt;PostTitle \/&gt;<\/code> \u062c\u0632\u0621\u060c \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u062a\u0639\u0644\u06cc\u0642 \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0648\u0631\u062f <code>&lt;PostComments \/&gt;<\/code> \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0646\u0638\u0631\u0627\u062a \u067e\u0633\u062a \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647 \u0631\u0646\u062f\u0631 \u0633\u0631\u06cc\u0639\u062a\u0631 \u0648 UX \u0628\u0647\u062a\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%84%D9%87_%D8%AF%D8%B1_Backend\"><\/span>\n<p>  \u0631\u0644\u0647 \u062f\u0631 Backend<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 Relay \u062f\u0631 Backend \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0645\u0627 \u0627\u0632 Relay Compiler \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0648 \u062a\u0648\u0644\u06cc\u062f \u0627\u0646\u0648\u0627\u0639 \u067e\u0631\u0633\u200c\u0648\u200c\u062c\u0648\u0647\u0627\/\u062c\u0647\u0634\u200c\u0647\u0627\/\u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u0647\u0627\u06cc \u062a\u0633\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u062f\u0631 backend \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062a\u0633\u062a Typeafe \u0648 DX \u0628\u0647\u062a\u0631 \u0648 \u0627\u062b\u0628\u0627\u062a \u0646\u062a\u0627\u06cc\u062c \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc GraphQL \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">graphql<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">strings<\/span><span class=\"p\">:<\/span> <span class=\"nx\">TemplateStringsArray<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">strings<\/span><span class=\"p\">?.<\/span><span class=\"nx\">schema<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">use graphqlExecute<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">strings<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">graphqlExecute<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">T<\/span> <span class=\"na\">extends<\/span> <span class=\"na\">OperationType<\/span><span class=\"p\">&gt;<\/span>(\n  args: GraphQLArgs<span class=\"p\">&lt;<\/span><span class=\"nc\">T<\/span><span class=\"err\">[<\/span><span class=\"s\">'variables'<\/span><span class=\"err\">]<\/span><span class=\"p\">&gt;<\/span>,\n) =&gt; <span class=\"si\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">graphql<\/span><span class=\"p\">(<\/span><span class=\"nx\">args<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">result<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">unknown<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">ExecutionResult<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">response<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n<span class=\"si\">}<\/span>;\n\nconst source = graphql`\n  query AppQuery($id: ID) <span class=\"si\">{<\/span>\n    <span class=\"nx\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">node<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">$id<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"p\">...<\/span> <span class=\"nx\">on<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">name<\/span>\n     <span class=\"p\">}<\/span>\n   <span class=\"si\">}<\/span>\n  } \n`;\n\nconst result = await graphqlExecute<span class=\"p\">&lt;<\/span><span class=\"nc\">AppQuery<\/span><span class=\"p\">&gt;<\/span>(<span class=\"si\">{<\/span>\n    <span class=\"nx\">schema<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">source<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">rootValue<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">contextValue<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">variableValues<\/span><span class=\"p\">,<\/span>\n  <span class=\"si\">}<\/span>);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>AppQuery<\/code>  \u0646\u0648\u0639 \u062a\u0648\u0633\u0637 Relay Compiler \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f \u0648 <code>result<\/code> \u0646\u0648\u0639 \u0635\u062d\u06cc\u062d \u0622\u0646 \u0631\u0627 \u062f\u0627\u0631\u062f\u060c \u0627\u06af\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u062f <code>result<\/code> \u0646\u0648\u0639  \u0627\u06cc\u0646 \u06cc\u06a9 DX \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%84%D9%87_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%D8%AF%D8%B1_Woovi\"><\/span>\n<p>  \u0631\u0644\u0647 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 Woovi<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u06cc\u0634\u062a\u0631 \u0648 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 Relay \u062f\u0631 Woovi \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0631\u0644\u0647 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062c\u062f\u0627 \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u062f\u0648\u0646 \u0634\u06a9\u0633\u062a\u0646 \u0686\u06cc\u0632\u06cc\u060c \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.  \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0631\u0644\u0647 \u062f\u0631 \u0632\u0646\u06af \u0632\u062f\u06af\u06cc \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0632 \u0647\u0645\u06cc\u0634\u0647 \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u0645\u0634\u0627\u0631\u06a9\u062a \u0645\u0646 \u062f\u0631 Relay \u062f\u0631 15 \u062f\u0633\u0627\u0645\u0628\u0631 2015 \u0628\u0648\u062f\u060c \u0622\u0646 \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f https:\/\/github.com\/facebookarchive\/relay-starter-kit\/commits?author=sibelius.<\/p>\n<p>\u0627\u0632 \u0622\u0646 \u0632\u0645\u0627\u0646\u060c GraphQL \u0648 Relay \u0628\u0633\u06cc\u0627\u0631 \u062a\u06a9\u0627\u0645\u0644 \u06cc\u0627\u0641\u062a\u0646\u062f.  \u0631\u0644\u0647 \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u067e\u0644\u0647\u200c\u0627\u06cc \u062f\u0627\u0631\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f \u06a9\u0627\u0631 \u062f\u0631\u0633\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0646\u0647 \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631.  \u0631\u0644\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06cc\u06a9 \u0645\u062f\u0644 \u0630\u0647\u0646\u06cc \u062c\u062f\u06cc\u062f \u0627\u0632 \u0646\u062d\u0648\u0647 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627 \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0645\u0627 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Relay \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 Woovi \u0627\u062f\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u062a\u0627 \u0628\u0647 \u0645\u0627 \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633\u200c\u0628\u0646\u062f\u06cc \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D8%B1%DA%AF%D8%A7%D9%87_%D8%B1%D9%84%D9%87\"><\/span>\n<p>  \u06a9\u0627\u0631\u06af\u0627\u0647 \u0631\u0644\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f Relay \u0631\u0627 \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f \u0628\u0647\u062a\u0631\u06cc\u0646 \u0645\u0646\u0628\u0639 Relay Workshop \u0627\u0633\u062a.  \u062f\u0627\u0631\u0627\u06cc 12 \u062a\u0645\u0631\u06cc\u0646 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Relay.<\/p>\n<hr\/>\n<p>\u0648\u0627\u06cc<br \/>Woovi \u06cc\u06a9 \u0627\u0633\u062a\u0627\u0631\u062a \u0622\u067e \u0627\u0633\u062a \u06a9\u0647 \u062e\u0631\u06cc\u062f\u0627\u0631\u0627\u0646 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u0647\u0631 \u0637\u0648\u0631 \u06a9\u0647 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0646\u062f \u067e\u0631\u062f\u0627\u062e\u062a \u06a9\u0646\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646\u060c Woovi \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a \u0641\u0648\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u0631\u06af\u0627\u0646\u0627\u0646 \u0628\u0631\u0627\u06cc \u067e\u0630\u06cc\u0631\u0634 \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0627 \u0645\u0627 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0627 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0631\u0644\u0647 \u0686\u06cc\u0633\u062a\u061f \u0627\u06af\u0631 \u0628\u0647 relay.dev \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u062f\u060c Relay \u06a9\u0644\u0627\u06cc\u0646\u062a GraphQL \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0634\u0645\u0627 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u0648 Relay \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0642\u0628\u0644 \u0647\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 Relay \u0628\u0647 \u062c\u062f\u0648\u0644 \u0645\u06cc\u200c\u0622\u0648\u0631\u062f \u0645\u06cc\u200c\u062f\u0627\u0646\u0646\u062f. \u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u0647\u0646\u0648\u0632 \u0627\u0632 Relay \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06cc\u0627 \u0647\u0646\u0648\u0632 \u062a\u0645\u0627\u0645 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":11923,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-11922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/11922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=11922"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/11922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/11923"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=11922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=11922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=11922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}