{"id":26101,"date":"2023-06-07T21:35:35","date_gmt":"2023-06-07T18:05:35","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/"},"modified":"2023-06-07T21:35:35","modified_gmt":"2023-06-07T18:05:35","slug":"how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/","title":{"rendered":"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 &#8220;Food Menu&#8221; \u0633\u0627\u062e\u062a\u0645: \u0627\u0632 Tech Stack \u062a\u0627 Workflow"},"content":{"rendered":"<div data-article-id=\"1496772\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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=\"Toggle Table of Content\"><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-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D9%85%D8%B9%D8%B1%D9%81%DB%8C\" >\u0645\u0639\u0631\u0641\u06cc<\/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-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D9%81%D9%86%D8%A7%D9%88%D8%B1%DB%8C_%D9%87%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D9%86_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%DA%A9%D8%B1%D8%AF%D9%85\" >\u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86_%E2%80%9C%D9%85%D9%86%D9%88_%D8%BA%D8%B0%D8%A7%E2%80%9D_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D8%B9%D9%85%D9%88%D9%85%DB%8C\" >\u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 &#8220;\u0645\u0646\u0648 \u063a\u0630\u0627&#8221; \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u0645\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1_%D8%A8%D8%A7%D8%B7%D9%86_Nodejs_Express\" >\u0633\u0627\u062e\u062a \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 Node.js Express<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1_%D9%BE%DB%8C%D8%B4%D8%A7%D9%86%DB%8C_Nextjs\" >\u0633\u0627\u062e\u062a \u0633\u0631\u0648\u0631 \u067e\u06cc\u0634\u0627\u0646\u06cc Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AF%D8%B1_%D8%AF%D8%A7%DA%A9%D8%B1\" >\u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u062f\u0627\u06a9\u0631<\/a><\/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-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D9%85%D8%AD%DB%8C%D8%B7_%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D8%B1_Preevy\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0631\u0627\u0626\u0647 \u062f\u0631 Preevy<\/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-i-built-a-modern-food-menu-web-app-from-tech-stack-to-workflow-3iok\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D8%B1%D9%81%DB%8C\"><\/span>\n<p>  \u0645\u0639\u0631\u0641\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u0648\u0641\u0642 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0647 \u062f\u0648 \u0686\u06cc\u0632 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f: \u06cc\u06a9 \u067e\u0627\u06cc\u0647 \u0641\u0646\u06cc \u0642\u0648\u06cc \u0648 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062d\u06a9\u0645 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0648\u062f \u06a9\u0627\u0631.<\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062a\u0648\u0633\u0639\u0647 \u0628\u0631 \u06cc\u06a9\u06cc \u06cc\u0627 \u062f\u06cc\u06af\u0631\u06cc \u062a\u0645\u0631\u06a9\u0632 \u062f\u0627\u0631\u0646\u062f.  \u0645\u0646\u0627\u0628\u0639 \u0641\u0646\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0648 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0631\u0627 \u0645\u0633\u062a\u0646\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0646\u0627\u0628\u0639 \u062e\u0648\u0628\u06cc \u0627\u0632 \u0628\u06cc\u0646\u0634 \u0628\u0631\u0627\u06cc \u0686\u06af\u0648\u0646\u06af\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0633\u0647\u0627\u0645\u062f\u0627\u0631\u0627\u0646 \u0645\u062a\u0639\u062f\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. <\/p>\n<p>\u0627\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0633\u0639\u06cc \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f \u0647\u0631 \u062f\u0648 \u0631\u0627 \u062f\u0631 \u06cc\u06a9\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u0645 \u0648 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0628\u0631\u062e\u06cc \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0639\u0627\u0644\u06cc \u0646\u0647 \u062a\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u067e\u0634\u062a\u0647\u060c \u0628\u0644\u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0622\u06cc\u0646\u062f \u0648 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u067e\u06cc\u0634 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u0646\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%86%D8%A7%D9%88%D8%B1%DB%8C_%D9%87%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D9%86_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%DA%A9%D8%B1%D8%AF%D9%85\"><\/span>\n<p>  \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u0647 \u0646\u062d\u0648\u0647 \u06a9\u0627\u0631 \u0645\u0646 \u0628\u0627 \u0686\u0647\u0627\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0635\u0644\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a: Node.js\u060c GraphQL\u060c Next.js \u0648 Preevy.  \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u062c\u0627\u0645\u0639\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u06af\u0633\u062a\u0631\u062f\u0647\u200c\u062a\u0631 \u062a\u0623\u062b\u06cc\u0631\u06af\u0630\u0627\u0631 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a\u060c \u0648 \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0645 \u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u0627\u0644\u0628 \u0648 \u0646\u0645\u0648\u0646\u0647 \u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u0628\u0627 \u062c\u0627\u0645\u0639\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 Node.js \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0637\u0646 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.  \u0633\u067e\u0633 GraphQL\u060c \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0627\u0635\u0644\u0627\u062d \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f.  Next.js \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u067e\u06cc\u0686\u06cc\u062f\u0647 React \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u062f\u0648\u0633\u062a\u200c\u062f\u0627\u0631 SEO \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c Preevy \u0627\u0628\u0632\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0633\u0631\u06cc\u0639 \u0648 \u0622\u0633\u0627\u0646 \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0634 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u062f\u0631 \u0627\u0628\u0631 \u0634\u0645\u0627 (\u0622\u0645\u0627\u0632\u0648\u0646\u060c \u06af\u0648\u06af\u0644 \u06cc\u0627 \u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a) \u0627\u0633\u062a.  \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0642\u0627\u0628\u0644 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc Preevy \u0631\u0627\u0647\u06cc \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u0622\u062e\u0631\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06a9\u062f \u062e\u0648\u062f\u060c \u062f\u0631\u06cc\u0627\u0641\u062a \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0648 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0630\u06cc\u0646\u0641\u0639\u0627\u0646 \u0642\u0628\u0644 \u0627\u0632 \u0627\u062f\u063a\u0627\u0645 \u0647\u0631 \u06a9\u062f\u06cc \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0646\u062f\u06cc \u06cc\u0627 \u062a\u0648\u0644\u06cc\u062f \u0627\u0633\u062a \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u0632 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0628\u0631\u0631\u0633\u06cc \u067e\u06cc\u0634 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u0633\u0631\u06cc\u0639\u062a\u0631 \u0644\u0630\u062a \u0628\u0628\u0631\u0646\u062f.<\/p>\n<p>\u062e\u0644\u0627\u0635\u0647 \u0645\u0627 \u0627\u0632 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0648\u0644 \u0627\u0633\u062a\u06a9 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\u0633\u0627\u062e\u062a \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 Node.js Express<\/li>\n<li>\u0633\u0627\u062e\u062a \u0633\u0631\u0648\u0631 \u067e\u06cc\u0634\u0627\u0646\u06cc Next.js<\/li>\n<li>\u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u062f\u0627\u06a9\u0631<\/li>\n<li>\u062a\u0647\u06cc\u0647 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0642\u0627\u0628\u0644 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Preevy\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86_%E2%80%9C%D9%85%D9%86%D9%88_%D8%BA%D8%B0%D8%A7%E2%80%9D_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D8%B9%D9%85%D9%88%D9%85%DB%8C\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 &#8220;\u0645\u0646\u0648 \u063a\u0630\u0627&#8221; \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u0645\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0646 \u0627\u06cc\u0646 \u062e\u0644\u0627\u0635\u0647 \u0631\u0627 \u0628\u0647 \u0633\u0628\u06a9 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0631\u0648\u0632\u0627\u0646\u0647 &#8220;\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062f\u0631 \u062c\u0645\u0639&#8221; \u0646\u0648\u0634\u062a\u0647 \u0627\u0645.  \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0628\u0627\u0639\u062b \u0634\u0648\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0628\u0631\u0627\u06cc \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0630\u0627\u0628 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u06a9\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u0645\u0646\u0648\u06cc \u063a\u0630\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  \u0627\u0633\u0627\u0633\u0627 \u06cc\u06a9 Backend Node.js \u0628\u0627 \u06cc\u06a9 \u0633\u0631\u0648\u0631 GraphQL \u0648\u062c\u0648\u062f \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a \u06a9\u0647 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u0633\u062e\u062a\u06cc \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a.  \u0648 \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634 Next.js \u0628\u0647 \u0628\u0627\u0637\u0646 Node.js \u0645\u062a\u0635\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627\u06cc GraphQL \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627 \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1_%D8%A8%D8%A7%D8%B7%D9%86_Nodejs_Express\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 Node.js Express<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u062f\u0631 \u0631\u0627\u06cc\u0627\u0646\u0647 \u062e\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u0628\u0647 \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0648\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u067e\u0631\u0648\u0698\u0647 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0628\u0627\u0637\u0646 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">mkdir <\/span>menu-project\n<span class=\"nb\">cd <\/span>menu-project\n<span class=\"nb\">mkdir <\/span>server\n<span class=\"nb\">touch <\/span>docker-compose.yml\n<span class=\"nb\">cd <\/span>server\nnpm init <span class=\"nt\">-y<\/span>\nnpm i express express-graphql graphql cors\nnpm i <span class=\"nt\">-D<\/span> dotenv nodemon\n<span class=\"nb\">mkdir <\/span>data schema\n<span class=\"nb\">touch<\/span> .env Dockerfile index.js\n<span class=\"nb\">touch <\/span>data\/menu.js schema\/schema.js\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>\u0628\u0639\u062f\u060c \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u06a9\u062f\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0635\u062d\u06cc\u062d \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>data\/menu.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">bases<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Egg Noodles<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Whole-wheat Noodles<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Rice Noodles<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">4<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Udon Noodles<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">5<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Jasmine Rice<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">6<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Whole-grain Rice<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">];<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">vegetables<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Pak Choi<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Shiitake Mushrooms<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Champignon Mushrooms<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">4<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Mixed Peppers<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">5<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Broccoli<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">6<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Spinach<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">7<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Baby Corn<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">8<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Red Onion<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">9<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Bamboo Shoots<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">];<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">meats<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Chicken<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Chicken Katsu<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Beef<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">4<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Pulled Beef<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">5<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Bacon<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">6<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Pork<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">7<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Duck<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">8<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Prawns<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">9<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Tofu<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">];<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">sauces<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sweet Teriyaki<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sweet and Sour<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Garlic and black pepper<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">4<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Oyster Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">5<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Hot soybean sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">6<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Yellow curry &amp; coconut<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">7<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Peanut<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"p\">{<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">8<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Asian spiced red sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">];<\/span>\n\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">bases<\/span><span class=\"p\">,<\/span> <span class=\"nx\">vegetables<\/span><span class=\"p\">,<\/span> <span class=\"nx\">meats<\/span><span class=\"p\">,<\/span> <span class=\"nx\">sauces<\/span> <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>\u0627\u06cc\u0646 \u06a9\u062f \u0648\u0627\u0631\u062f \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>schema\/schema.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">bases<\/span><span class=\"p\">,<\/span> <span class=\"nx\">vegetables<\/span><span class=\"p\">,<\/span> <span class=\"nx\">meats<\/span><span class=\"p\">,<\/span> <span class=\"nx\">sauces<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">..\/data\/menu<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">GraphQLObjectType<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"nx\">GraphQLID<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"nx\">GraphQLString<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"nx\">GraphQLList<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"nx\">GraphQLSchema<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">graphql<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">BaseType<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLObjectType<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Base<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">VegetableType<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLObjectType<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Vegetable<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">MeatType<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLObjectType<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Meat<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">SauceType<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLObjectType<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Sauce<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">menuItem<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLString<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">RootQuery<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLObjectType<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">RootQueryType<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">bases<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLList<\/span><span class=\"p\">(<\/span><span class=\"nx\">BaseType<\/span><span class=\"p\">),<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">bases<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">base<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">BaseType<\/span><span class=\"p\">,<\/span>\n\n      <span class=\"na\">args<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">bases<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">base<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">base<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">args<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">vegetables<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLList<\/span><span class=\"p\">(<\/span><span class=\"nx\">VegetableType<\/span><span class=\"p\">),<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">vegetables<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">vegetable<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">VegetableType<\/span><span class=\"p\">,<\/span>\n\n      <span class=\"na\">args<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">vegetables<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">vegetable<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">vegetable<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">args<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">meats<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLList<\/span><span class=\"p\">(<\/span><span class=\"nx\">MeatType<\/span><span class=\"p\">),<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">meats<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">meat<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MeatType<\/span><span class=\"p\">,<\/span>\n\n      <span class=\"na\">args<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">meats<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">meat<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">meat<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">args<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">sauces<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLList<\/span><span class=\"p\">(<\/span><span class=\"nx\">SauceType<\/span><span class=\"p\">),<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">sauces<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"na\">sauce<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">SauceType<\/span><span class=\"p\">,<\/span>\n\n      <span class=\"na\">args<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphQLID<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span>\n\n      <span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">sauces<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">sauce<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">sauce<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">args<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GraphQLSchema<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RootQuery<\/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>\u0648 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>.env<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>NODE_ENV <span class=\"o\">=<\/span> <span class=\"s2\">\"development\"<\/span>\n\nPORT <span class=\"o\">=<\/span> 8080\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>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 <code>Dockerfile<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>FROM node:18\n\nWORKDIR \/app\n\nCOPY package<span class=\"k\">*<\/span>.json .\/\n\nRUN npm <span class=\"nb\">install\n\n<\/span>COPY <span class=\"nb\">.<\/span> <span class=\"nb\">.<\/span>\n\nEXPOSE 8080\n\nCMD <span class=\"o\">[<\/span><span class=\"s2\">\"node\"<\/span>, <span class=\"s2\">\"index.js\"<\/span><span class=\"o\">]<\/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>\u0648 \u0645\u0627 <code>index.js<\/code> \u0641\u0627\u06cc\u0644 \u0627\u06cc\u0646 \u06a9\u062f \u0633\u0631\u0648\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">express<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">express<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">cors<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cors<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dotenv<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">config<\/span><span class=\"p\">();<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">graphqlHTTP<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">express-graphql<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">schema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/schema\/schema<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">express<\/span><span class=\"p\">();<\/span>\n\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">use<\/span><span class=\"p\">(<\/span><span class=\"nx\">cors<\/span><span class=\"p\">());<\/span>\n\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">use<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">\/graphql<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"nx\">graphqlHTTP<\/span><span class=\"p\">({<\/span>\n    <span class=\"nx\">schema<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">graphiql<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">development<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">port<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PORT<\/span> <span class=\"o\">||<\/span> <span class=\"mi\">8080<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">listen<\/span><span class=\"p\">(<\/span><span class=\"nx\">port<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Server running on port <\/span><span class=\"p\">${<\/span><span class=\"nx\">port<\/span><span class=\"p\">}<\/span><span class=\"s2\">, http:\/\/localhost:<\/span><span class=\"p\">${<\/span><span class=\"nx\">port<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/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>\u0648 \u062f\u0631 \u0622\u062e\u0631 <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight yaml\"><code><span class=\"na\">version<\/span><span class=\"pi\">:<\/span> <span class=\"s1\">'<\/span><span class=\"s\">3'<\/span>\n<span class=\"na\">services<\/span><span class=\"pi\">:<\/span>\n  <span class=\"na\">server<\/span><span class=\"pi\">:<\/span>\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">server<\/span>\n    <span class=\"na\">build<\/span><span class=\"pi\">:<\/span>\n      <span class=\"na\">context<\/span><span class=\"pi\">:<\/span> <span class=\"s\">.\/server<\/span>\n      <span class=\"na\">dockerfile<\/span><span class=\"pi\">:<\/span> <span class=\"s\">Dockerfile<\/span>\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/server:\/app<\/span>\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">8080:8080'<\/span>\n    <span class=\"na\">environment<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">NODE_ENV=development<\/span>\n\n  <span class=\"na\">client<\/span><span class=\"pi\">:<\/span>\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">client<\/span>\n    <span class=\"na\">build<\/span><span class=\"pi\">:<\/span>\n      <span class=\"na\">context<\/span><span class=\"pi\">:<\/span> <span class=\"s\">.\/client<\/span>\n      <span class=\"na\">dockerfile<\/span><span class=\"pi\">:<\/span> <span class=\"s\">Dockerfile<\/span>\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/client\/src:\/app\/src<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/client\/public:\/app\/public<\/span>\n    <span class=\"na\">restart<\/span><span class=\"pi\">:<\/span> <span class=\"s\">always<\/span>\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">3000:3000<\/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>\u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627\u06cc \u0627\u062c\u0631\u0627 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>package.json<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u0627 \u062e\u0648\u0628 \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0648\u06cc\u0645:]\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n\n<\/span><span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"node index.js\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n\n<\/span><span class=\"nl\">\"dev\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"nodemon index.js\"<\/span><span class=\"w\">\n\n<\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/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>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u0628\u062e\u0634 Backend \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627\u060c \u0641\u0642\u0637 \u0628\u0647 \u067e\u0648\u0634\u0647 root \u0633\u0631\u0648\u0631 \u0628\u0631\u0648\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm run start\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>\u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0628\u0647 http:\/\/localhost:8080\/graphql \u0628\u0631\u0648\u06cc\u062f \u062a\u0627 GraphQL API \u062e\u0648\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<p>\u0642\u0633\u0645\u062a \u0628\u0639\u062f\u06cc \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0627\u0633\u062a\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0622\u0646 \u0628\u0631\u0633\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1_%D9%BE%DB%8C%D8%B4%D8%A7%D9%86%DB%8C_Nextjs\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0633\u0631\u0648\u0631 \u067e\u06cc\u0634\u0627\u0646\u06cc Next.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u0628\u0627\u0634\u062f <code>menu-project<\/code> \u067e\u0648\u0634\u0647 \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js \u062a\u0646\u0638\u06cc\u0645 \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx create-next-app client\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\u0646\u0638\u06cc\u0645\u0627\u062a\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u0646 \u0627\u0632 \u0627\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0645\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u2714 \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0632 TypeScript \u0628\u0627 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f  \u2026 <strong>\u062e\u06cc\u0631<\/strong> \/ \u0622\u0631\u0647<br \/>\u2714 \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0632 ESLint \u0628\u0627 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f  \u2026 <strong>\u062e\u06cc\u0631<\/strong> \/ \u0622\u0631\u0647<br \/>\u2714 \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0632 Tailwind CSS \u0628\u0627 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f  \u2026 <strong>\u062e\u06cc\u0631<\/strong> \/ \u0622\u0631\u0647<br \/>\u2714 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>src\/<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u061f  \u2026 \u0646\u0647 \/ <strong>\u0622\u0631\u0647<\/strong><br \/>\u2714 \u0627\u0632 App Router (\u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f  \u2026 \u0646\u0647 \/ <strong>\u0622\u0631\u0647<\/strong><br \/>\u2714 \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0646\u0627\u0645 \u0645\u0633\u062a\u0639\u0627\u0631 \u0648\u0627\u0631\u062f\u0627\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u06cc\u062f\u061f  \u2026 <strong>\u062e\u06cc\u0631<\/strong> \/ \u0622\u0631\u0647<\/p>\n<p><code>cd<\/code>  \u0628\u0647 \u062f\u0631\u0648\u0646 <code>client<\/code> \u067e\u0648\u0634\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm i @apollo\/client graphql\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>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">touch <\/span>Dockerfile\n<span class=\"nb\">cd <\/span>src\/app\n<span class=\"nb\">mkdir <\/span>components queries utils\n<span class=\"nb\">touch <\/span>components\/Bases.js components\/Meats.js components\/Sauces.js components\/Vegetables.js\n<span class=\"nb\">touch <\/span>queries\/clientQueries.js\n<span class=\"nb\">touch <\/span>utils\/withApollo.js\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\u0646\u0647\u0627 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u062f \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u0627\u0631\u0645\u0627\u0646 \u062a\u0645\u0627\u0645 \u0627\u0633\u062a.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0634\u0631\u0648\u0639 \u0628\u0627 <code>components\/Bases.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useQuery<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@apollo\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GET_BASE<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/queries\/clientQueries<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">withApollo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/utils\/withApollo<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Bases<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">GET_BASE<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Loading<\/span> <span class=\"nx\">bases<\/span><span class=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">The<\/span> <span class=\"nx\">food<\/span> <span class=\"nx\">failed<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">load<\/span> <span class=\"nx\">there<\/span> <span class=\"nx\">is<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">problem<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">error<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">base-box<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cost-container<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"mi\">01<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">$5<\/span><span class=\"p\">.<\/span><span class=\"mi\">95<\/span> <span class=\"nx\">only<\/span> <span class=\"nx\">one<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Chose<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">br<\/span> <span class=\"o\">\/&gt;<\/span>\n              <span class=\"nx\">your<\/span> <span class=\"nx\">base<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">bases<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">bases<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">bases<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">table<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">bases<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"p\">{<\/span><span class=\"nx\">bases<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/table<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">))}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">withApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">Bases<\/span><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>\u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a <code>components\/Meats.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useQuery<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@apollo\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GET_MEAT<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/queries\/clientQueries<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">withApollo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/utils\/withApollo<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Meats<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">GET_MEAT<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Loading<\/span> <span class=\"nx\">meats<\/span><span class=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">The<\/span> <span class=\"nx\">food<\/span> <span class=\"nx\">failed<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">load<\/span> <span class=\"nx\">there<\/span> <span class=\"nx\">is<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">problem<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">error<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">meat-box<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cost-container<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"mi\">03<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">$1<\/span><span class=\"p\">.<\/span><span class=\"mi\">25<\/span> <span class=\"nx\">each<\/span> <span class=\"mi\">2<\/span> <span class=\"nx\">Max<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Choose<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">br<\/span> <span class=\"o\">\/&gt;<\/span> <span class=\"nx\">your<\/span> <span class=\"nx\">Meats<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">meats<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">meats<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">meats<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">table<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">meats<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"p\">{<\/span><span class=\"nx\">meats<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/table<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">))}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">withApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">Meats<\/span><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>\u067e\u0633 \u0627\u0632 \u0622\u0646 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>components\/Sauces.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useQuery<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@apollo\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GET_SAUCE<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/queries\/clientQueries<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">withApollo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/utils\/withApollo<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Sauces<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">GET_SAUCE<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Loading<\/span> <span class=\"nx\">sauces<\/span><span class=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">The<\/span> <span class=\"nx\">food<\/span> <span class=\"nx\">failed<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">load<\/span> <span class=\"nx\">there<\/span> <span class=\"nx\">is<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">problem<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">error<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sauces-box<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cost-container<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"mi\">04<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">FREE<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Choose<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">br<\/span> <span class=\"o\">\/&gt;<\/span>\n              <span class=\"nx\">your<\/span> <span class=\"nx\">Sauces<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">sauces<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">sauces<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">sauces<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">table<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">sauces<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"p\">{<\/span><span class=\"nx\">sauces<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/table<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">))}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">withApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">Sauces<\/span><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>\u0627\u06cc\u0646 \u06a9\u062f \u0648\u0627\u0631\u062f \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>components\/Vegetables.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useQuery<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@apollo\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GET_VEGETABLE<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/queries\/clientQueries<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">withApollo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/utils\/withApollo<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Vegetables<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">GET_VEGETABLE<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Loading<\/span> <span class=\"nx\">vegetables<\/span><span class=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">The<\/span> <span class=\"nx\">food<\/span> <span class=\"nx\">failed<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">load<\/span> <span class=\"nx\">there<\/span> <span class=\"nx\">is<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">problem<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">error<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">vegetable-box<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cost-container<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"mi\">02<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">$1<\/span><span class=\"p\">.<\/span><span class=\"mi\">25<\/span> <span class=\"nx\">each<\/span> <span class=\"mi\">4<\/span> <span class=\"nx\">Max<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Choose<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">br<\/span> <span class=\"o\">\/&gt;<\/span>\n              <span class=\"nx\">your<\/span> <span class=\"nx\">Vegetables<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">vegetables<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">vegetables<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">vegetables<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">table<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">vegetables<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"p\">{<\/span><span class=\"nx\">vegetables<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/table<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">))}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">withApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">Vegetables<\/span><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>\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0647 <code>queries\/clientQueries.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">gql<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@apollo\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">GET_BASE<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  query getBase {\n    bases {\n      id\n\n      name\n\n      menuItem\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">GET_VEGETABLE<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  query getVegetable {\n    vegetables {\n      id\n\n      name\n\n      menuItem\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">GET_MEAT<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  query getMeat {\n    meats {\n      id\n\n      name\n\n      menuItem\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">GET_SAUCE<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  query getSauce {\n    sauces {\n      id\n\n      name\n\n      menuItem\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GET_BASE<\/span><span class=\"p\">,<\/span> <span class=\"nx\">GET_VEGETABLE<\/span><span class=\"p\">,<\/span> <span class=\"nx\">GET_MEAT<\/span><span class=\"p\">,<\/span> <span class=\"nx\">GET_SAUCE<\/span> <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\u0642\u0631\u06cc\u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0631\u0627\u06cc <code>utils\/withApollo.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ApolloClient<\/span><span class=\"p\">,<\/span> <span class=\"nx\">InMemoryCache<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ApolloProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@apollo\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useMemo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">initializeApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialState<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">_apolloClient<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">ApolloClient<\/span><span class=\"p\">({<\/span>\n    <span class=\"c1\">\/\/ Local GraphQL Endpoint<\/span>\n\n    <span class=\"na\">uri<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost:8080\/graphql<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ Add your Preevy GraphQL Endpoint<\/span>\n\n    <span class=\"c1\">\/\/ uri: 'https:\/\/your-backend-server-livecycle.run\/graphql',<\/span>\n\n    <span class=\"na\">cache<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">InMemoryCache<\/span><span class=\"p\">().<\/span><span class=\"nx\">restore<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialState<\/span> <span class=\"o\">||<\/span> <span class=\"p\">{}),<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">_apolloClient<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">useApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialState<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">store<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useMemo<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">initializeApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialState<\/span><span class=\"p\">),<\/span> <span class=\"p\">[<\/span><span class=\"nx\">initialState<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">store<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">withApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">PageComponent<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">WithApollo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">apolloClient<\/span><span class=\"p\">,<\/span> <span class=\"nx\">apolloState<\/span><span class=\"p\">,<\/span> <span class=\"p\">...<\/span><span class=\"nx\">pageProps<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useApollo<\/span><span class=\"p\">(<\/span><span class=\"nx\">apolloState<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">ApolloProvider<\/span> <span class=\"nx\">client<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">client<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">PageComponent<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">pageProps<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ApolloProvider<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/ On the server<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"k\">typeof<\/span> <span class=\"nb\">window<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">undefined<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">WithApollo<\/span><span class=\"p\">.<\/span><span class=\"nx\">getInitialProps<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">apolloClient<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">initializeApollo<\/span><span class=\"p\">();<\/span>\n\n      <span class=\"kd\">let<\/span> <span class=\"nx\">pageProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{};<\/span>\n\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">PageComponent<\/span><span class=\"p\">.<\/span><span class=\"nx\">getInitialProps<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">pageProps<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">PageComponent<\/span><span class=\"p\">.<\/span><span class=\"nx\">getInitialProps<\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">res<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">finished<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ When redirecting, the response is finished.<\/span>\n\n        <span class=\"c1\">\/\/ No point in continuing to render<\/span>\n\n        <span class=\"k\">return<\/span> <span class=\"nx\">pageProps<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"kd\">const<\/span> <span class=\"nx\">apolloState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">apolloClient<\/span><span class=\"p\">.<\/span><span class=\"nx\">cache<\/span><span class=\"p\">.<\/span><span class=\"nx\">extract<\/span><span class=\"p\">();<\/span>\n\n      <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n        <span class=\"p\">...<\/span><span class=\"nx\">pageProps<\/span><span class=\"p\">,<\/span>\n\n        <span class=\"nx\">apolloState<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">};<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">WithApollo<\/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>\u0628\u0639\u062f\u06cc CSS \u0645\u0627 \u062f\u0631 <code>globals.css<\/code> \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0647\u0645\u0647 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u062f \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">*,<\/span>\n<span class=\"o\">*<\/span><span class=\"nd\">::before<\/span><span class=\"o\">,<\/span>\n<span class=\"o\">*<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">html<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">header<\/span> <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ffffff<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">4rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">text-transform<\/span><span class=\"p\">:<\/span> <span class=\"nb\">uppercase<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1c1917<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1c1917<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.4rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">text-transform<\/span><span class=\"p\">:<\/span> <span class=\"nb\">uppercase<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">border-top<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.3rem<\/span> <span class=\"nb\">solid<\/span> <span class=\"no\">black<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.3rem<\/span> <span class=\"nb\">solid<\/span> <span class=\"no\">black<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span> <span class=\"m\">0<\/span> <span class=\"m\">1rem<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#374151<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">flex-flow<\/span><span class=\"p\">:<\/span> <span class=\"n\">row<\/span> <span class=\"n\">wrap<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"n\">space-around<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f9fafb<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.base-box<\/span><span class=\"o\">,<\/span>\n<span class=\"nc\">.vegetable-box<\/span><span class=\"o\">,<\/span>\n<span class=\"nc\">.meat-box<\/span><span class=\"o\">,<\/span>\n<span class=\"nc\">.sauces-box<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f43f5e<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">20rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ffffff<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"nb\">bold<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.cost-container<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">flex-flow<\/span><span class=\"p\">:<\/span> <span class=\"n\">row<\/span> <span class=\"nb\">nowrap<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"n\">space-between<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.cost-container<\/span> <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#eff6ff<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.2rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f43f5e<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">@media<\/span> <span class=\"n\">screen<\/span> <span class=\"n\">and<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">800px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">flex-flow<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <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>\u0641\u0642\u0637 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u0631\u0641\u062a\u0646 \u0628\u0639\u062f \u0627\u0632 \u0627\u06cc\u0646\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a <code>page.js<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644 \u0647\u0645\u0647 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0631\u06cc\u0645 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Bases<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/Bases<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Vegetables<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/Vegetables<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Meats<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/Meats<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Sauces<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/Sauces<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Menu<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/header<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">container<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Bases<\/span> <span class=\"o\">\/&gt;<\/span>\n\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Vegetables<\/span> <span class=\"o\">\/&gt;<\/span>\n\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Meats<\/span> <span class=\"o\">\/&gt;<\/span>\n\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Sauces<\/span> <span class=\"o\">\/&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/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>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0627\u06cc\u0646 \u06a9\u062f \u062f\u0631 \u0642\u0633\u0645\u062a \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u06cc\u0645 <code>Dockerfile<\/code> \u062f\u0631 \u067e\u0648\u0634\u0647 \u0645\u0634\u062a\u0631\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>FROM node:18-alpine\n\nWORKDIR \/app\n\n<span class=\"c\"># Install dependencies based on the preferred package manager<\/span>\n\nCOPY package.json yarn.lock<span class=\"k\">*<\/span> package-lock.json<span class=\"k\">*<\/span> pnpm-lock.yaml<span class=\"k\">*<\/span> .\/\n\nRUN <span class=\"se\">\\<\/span>\n\n<span class=\"k\">if<\/span> <span class=\"o\">[<\/span> <span class=\"nt\">-f<\/span> yarn.lock <span class=\"o\">]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then <\/span>yarn <span class=\"nt\">--frozen-lockfile<\/span><span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">elif<\/span> <span class=\"o\">[<\/span> <span class=\"nt\">-f<\/span> package-lock.json <span class=\"o\">]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then <\/span>npm ci<span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">elif<\/span> <span class=\"o\">[<\/span> <span class=\"nt\">-f<\/span> pnpm-lock.yaml <span class=\"o\">]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then <\/span>yarn global add pnpm <span class=\"o\">&amp;&amp;<\/span> pnpm i<span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"c\"># Allow install without lockfile, so example works even without Node.js installed locally<\/span>\n\n<span class=\"k\">else <\/span><span class=\"nb\">echo<\/span> <span class=\"s2\">\"Warning: Lockfile not found. It is recommended to commit lockfiles to version control.\"<\/span> <span class=\"o\">&amp;&amp;<\/span> yarn <span class=\"nb\">install<\/span><span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">fi\n\n<\/span>COPY src .\/src\n\nCOPY public .\/public\n\nCOPY next.config.js <span class=\"nb\">.<\/span>\n\n<span class=\"c\"># Next.js collects completely anonymous telemetry data about general usage. Learn more here: https:\/\/nextjs.org\/telemetry<\/span>\n\n<span class=\"c\"># Uncomment the following line to disable telemetry at run time<\/span>\n\n<span class=\"c\"># ENV NEXT_TELEMETRY_DISABLED 1<\/span>\n\n<span class=\"c\"># Note: Don't expose ports here, Compose will handle that for us<\/span>\n\n<span class=\"c\"># Start Next.js in development mode based on the preferred package manager<\/span>\n\nCMD <span class=\"se\">\\<\/span>\n\n<span class=\"k\">if<\/span> <span class=\"o\">[<\/span> <span class=\"nt\">-f<\/span> yarn.lock <span class=\"o\">]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then <\/span>yarn dev<span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">elif<\/span> <span class=\"o\">[<\/span> <span class=\"nt\">-f<\/span> package-lock.json <span class=\"o\">]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then <\/span>npm run dev<span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">elif<\/span> <span class=\"o\">[<\/span> <span class=\"nt\">-f<\/span> pnpm-lock.yaml <span class=\"o\">]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then <\/span>pnpm dev<span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">else <\/span>yarn dev<span class=\"p\">;<\/span> <span class=\"se\">\\<\/span>\n\n<span class=\"k\">fi<\/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>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0648 \u0628\u0627\u0637\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627\u060c \u0641\u0642\u0637 \u0628\u0647 \u067e\u0648\u0634\u0647 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0628\u0631\u0648\u06cc\u062f <code>client<\/code> \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 frontend \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm run dev\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>\u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 \u0634\u0645\u0627 \u0647\u0646\u0648\u0632 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a \u0648 \u0628\u0627\u06cc\u062f \u0645\u0646\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0628\u062e\u0634 \u0628\u0639\u062f\u06cc \u0628\u0647 \u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0638\u0631\u0641 Docker \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AF%D8%B1_%D8%AF%D8%A7%DA%A9%D8%B1\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u062f\u0627\u06a9\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u062f\u0631 Docker \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a.  \u0627\u0628\u062a\u062f\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 Docker \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u0645\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc \u0634\u0648\u0646\u062f \u0632\u06cc\u0631\u0627 \u0627\u0632 \u0647\u0645\u0627\u0646 \u067e\u0648\u0631\u062a \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u0633\u067e\u0633 \u0641\u0642\u0637 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0648\u0634\u0647 root \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f <code>menu-project<\/code> \u0648 \u0633\u067e\u0633 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>docker-compose up<\/code>.  \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0633\u0631\u0648\u0631\u0647\u0627\u06cc Backend \u0648 Frontend \u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0627\u06a9\u0646\u0648\u0646 \u0641\u0642\u0637 \u0628\u0647 \u0647\u0645\u0627\u0646 URL\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0631\u0633\u06cc\u062f\u0645 \u062a\u0627 \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0628\u06cc\u0646\u0646\u062f.<\/p>\n<p>\u0633\u0631\u0648\u0631 \u062f\u0631 http:\/\/localhost:8080 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a<br \/>\u0645\u0634\u062a\u0631\u06cc \u062f\u0631 http:\/\/localhost:3000 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0632\u0645\u0627\u0646 \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Preevy \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0627\u0641\u0631\u0627\u062f\u06cc \u06a9\u0647 \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u0645.  \u0622\u0646\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u0628\u0628\u06cc\u0646\u0646\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062f\u06cc\u062f\u0646 \u0638\u0627\u0647\u0631 \u06cc\u0627 \u0631\u0641\u062a\u0627\u0631 \u0622\u0646 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0645\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.  \u0627\u06cc\u0646 \u0642\u0628\u0644\u0627\u064b \u0628\u0627\u0639\u062b \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u062f\u0631 \u0633\u0627\u0639\u062a\u200c\u0647\u0627 \u062f\u0631 \u0631\u0641\u062a \u0648 \u0628\u0631\u06af\u0634\u062a \u0645\u0646 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0645\u0646 \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062e\u0648\u062f \u06af\u0646\u062c\u0627\u0646\u062f\u0647\u200c\u0627\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D9%85%D8%AD%DB%8C%D8%B7_%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D8%B1_Preevy\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0631\u0627\u0626\u0647 \u062f\u0631 Preevy<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0627\u0633\u0646\u0627\u062f \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Preevy \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0645\u0627\u062f\u0647 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u062a\u0627\u0645\u06cc\u0646 \u0634\u0648\u06cc\u062f.  \u062f\u0627\u062e\u0644 \u067e\u0648\u0634\u0647 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0627\u06cc <code>menu-project<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>preevy init\npreevy up <span class=\"nt\">--id<\/span> 321\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>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0631\u0627 \u067e\u0627\u0633 \u06a9\u0646\u06cc\u062f <code>--id<\/code> \u067e\u0631\u0686\u0645 \u0628\u0627 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0627\u0639\u062f\u0627\u062f  \u0645\u0646 \u0627\u0632 321 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u062f.  \u062a\u06a9\u0645\u06cc\u0644 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06a9\u0645\u06cc \u0637\u0648\u0644 \u0628\u06a9\u0634\u062f \u0632\u06cc\u0631\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627\u0637\u0646 \u0648 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0631\u0627 \u062f\u0631 AWS \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.  \u0648\u0642\u062a\u06cc \u06a9\u0627\u0645\u0644 \u0634\u062f\u060c \u0628\u0627\u06cc\u062f \u062f\u0648 URL \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 \u0648 \u06cc\u06a9\u06cc \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f\u060c \u0645\u062b\u0627\u0644 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>server  8080 https:\/\/your-url-server.livecycle.run\/\nclient  3000 https:\/\/your-url-client.livecycle.run\/\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>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u067e\u06cc\u0648\u0646\u062f\u0647\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0647\u0631 \u062f\u0648 \u0633\u0631\u0648\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0647\u0633\u062a\u0646\u062f \u0647\u062f\u0627\u06cc\u062a \u0634\u0648\u06cc\u062f.  \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0635\u0641\u062d\u0647 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0627 \u0631\u0627 \u062f\u0631 \u067e\u06cc\u0648\u0646\u062f \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0646\u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0644\u06cc\u0644\u0634 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0646\u0648\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a <code>http:\/\/localhost:8080\/graphql<\/code> \u062f\u0631 \u06a9\u062f \u0634\u0645\u0627  \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>uri<\/code> \u062f\u0631 \u0641\u0627\u06cc\u0644 <code>client\/src\/app\/utils\/withApollo.js<\/code> \u0628\u0647 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc GraphQL \u0633\u0631\u0648\u0631 Preevy \u062e\u0648\u062f \u0648 \u0633\u067e\u0633 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>preevy up --id 321<\/code> \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644 \u0622\u062e\u0631\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a. <\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0635\u0641\u062d\u0647 \u0628\u0627\u06cc\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0632 GraphQL API \u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Node.js\u060c GraphQL\u060c Next.js\u060c \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f\u060c \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u06cc \u0648 \u0631\u0639\u0627\u06cc\u062a \u062d\u0631\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062f\u0631 \u062e\u0637 \u0645\u0642\u062f\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.  \u0648\u0642\u062a\u06cc \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627 \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u062c\u0639\u0628\u0647 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u060c \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u0622\u06af\u0627\u0647 \u0628\u0647 \u062d\u0631\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Preevy \u062a\u0646\u0647\u0627 \u062a\u062c\u0631\u0628\u0647 \u0628\u0647\u062a\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u062a\u0633\u0647\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u0633\u0631\u06cc\u0639\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u06cc\u0645\u0646 \u0648 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0628\u0627 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0648\u0627\u0636\u062d \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0628\u0627\u0644\u0627\u062a\u0631 \u0631\u0627 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06cc\u06a9 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u0648\u0627\u0642\u0639 \u0628\u06cc\u0646\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u0631\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u0627\u0632 \u0647\u0645 \u0627\u0641\u0632\u0627\u06cc\u06cc \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u062d\u0627\u0644 \u067e\u06cc\u0634\u0631\u0641\u062a \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc \u0648\u0627\u062c\u0628 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u0626\u0645\u0627\u064b \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062f\u0627\u0646\u0634\u060c \u0634\u0645\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0645\u062c\u0647\u0632 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u062a\u0627 \u0627\u0633\u062a\u0639\u062f\u0627\u062f\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0633\u0637\u062d \u0628\u0639\u062f\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0647\u06cc\u062f\u060c \u062f\u0631 \u0644\u0628\u0647 \u0646\u0648\u0622\u0648\u0631\u06cc \u0641\u0646\u06cc \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0627\u0642\u0639\u0627\u064b \u062a\u0641\u0627\u0648\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0639\u0631\u0641\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u0648\u0641\u0642 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0647 \u062f\u0648 \u0686\u06cc\u0632 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f: \u06cc\u06a9 \u067e\u0627\u06cc\u0647 \u0641\u0646\u06cc \u0642\u0648\u06cc \u0648 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062d\u06a9\u0645 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0648\u062f \u06a9\u0627\u0631. \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062a\u0648\u0633\u0639\u0647 \u0628\u0631 \u06cc\u06a9\u06cc \u06cc\u0627 \u062f\u06cc\u06af\u0631\u06cc \u062a\u0645\u0631\u06a9\u0632 \u062f\u0627\u0631\u0646\u062f. \u0645\u0646\u0627\u0628\u0639 \u0641\u0646\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0648 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0631\u0627 \u0645\u0633\u062a\u0646\u062f \u0645\u06cc \u06a9\u0646\u062f. &hellip;<\/p>\n","protected":false},"author":2,"featured_media":26102,"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-26101","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\/26101","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=26101"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/26101\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/26102"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=26101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=26101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=26101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}