{"id":27110,"date":"2023-06-15T22:09:25","date_gmt":"2023-06-15T18:39:25","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/graphql-with-next-js-59j8\/"},"modified":"2023-06-15T22:09:25","modified_gmt":"2023-06-15T18:39:25","slug":"graphql-with-next-js-59j8","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/graphql-with-next-js-59j8\/","title":{"rendered":"GraphQL \u0628\u0627 NEXT JS &#8211; DEV Community"},"content":{"rendered":"<div data-article-id=\"1505623\" id=\"article-body\">\n<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647 \u0627\u0645\u0631\u0648\u0632 \u0645\u0646 \u062f\u0631 \u0645\u0648\u0631\u062f GraphQL API \u0628\u0627 Next JS \u0628\u062d\u062b \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.<\/p>\n<p>GraphQL \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0628\u0631\u0627\u06cc API \u0647\u0627 (Application Programming Interface) \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0646\u0639\u0637\u0641 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  GraphQL \u062a\u0648\u0633\u0637 \u0641\u06cc\u0633\u0628\u0648\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f \u0648 \u062f\u0631 \u0633\u0627\u0644 2015 \u0628\u0631\u0627\u06cc \u0639\u0645\u0648\u0645 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f.<\/p>\n<p>\u0628\u0631\u062e\u0644\u0627\u0641 API \u0647\u0627\u06cc REST \u0633\u0646\u062a\u06cc\u060c \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627 \u0627\u063a\u0644\u0628 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u062b\u0627\u0628\u062a \u062a\u0639\u06cc\u06cc\u0646 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c GraphQL \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0634\u06a9\u0644 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u0646\u062f.  \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648\u0627\u062d\u062f \u0631\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u062f\u0642\u06cc\u0642 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u0646\u062f \u0648 \u067e\u0627\u0633\u062e\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0628\u0627\u0634\u062f.  \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0648\u0627\u06a9\u0634\u06cc \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u06cc\u0627 \u06a9\u0645 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u06cc\u0627 \u06a9\u0645\u062a\u0631 \u0627\u0632 \u0622\u0646\u0686\u0647 \u0648\u0627\u0642\u0639\u0627\u064b \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0628\u0627 GraphWL\u060c Express JS\u060c MongoDB \u0648 NEXT JS \u0622\u0645\u062f\u0647 \u0627\u0633\u062a &#8211; <\/p>\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 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/graphql-with-next-js-59j8\/#%D8%A7%DB%8C%D9%86_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%BE%D9%88%D8%B4%D9%87_%D9%85%D8%A7_%D8%AE%D9%88%D8%A7%D9%87%D8%AF_%D8%A8%D9%88%D8%AF\" >\u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/a><\/li><\/ul><\/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\/graphql-with-next-js-59j8\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Nextjs\" >\u0645\u0631\u062d\u0644\u0647 1: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Next.js<\/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\/graphql-with-next-js-59j8\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1\" >\u0645\u0631\u062d\u0644\u0647 2: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631<\/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\/graphql-with-next-js-59j8\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%B3%D8%B1%D9%88%D8%B1_%D8%B1%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u0633\u0631\u0648\u0631 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/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\/graphql-with-next-js-59j8\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C_GraphQL\" >\u0645\u0631\u062d\u0644\u0647 4: \u0627\u06cc\u062c\u0627\u062f \u0645\u0634\u062a\u0631\u06cc GraphQL<\/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\/graphql-with-next-js-59j8\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D8%AC%D8%B2%D8%A1_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%86%D8%AC%D8%A7%D9%85_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_CRUD\" >\u0645\u0631\u062d\u0644\u0647 5: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD<\/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\/graphql-with-next-js-59j8\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_6_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_Nextjs\" >\u0645\u0631\u062d\u0644\u0647 6: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0635\u0641\u062d\u0627\u062a Next.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/graphql-with-next-js-59j8\/#%D8%AA%D9%88%D8%AC%D9%87_%D9%85%D8%B7%D9%85%D8%A6%D9%86_%D8%B4%D9%88%DB%8C%D8%AF_%DA%A9%D9%87_%D8%B3%D8%B1%D9%88%D8%B1_GraphQL_%D8%B4%D9%85%D8%A7_%D8%B1%D9%88%DB%8C_http_localhost_4000_%D9%87%D9%85%D8%A7%D9%86%D8%B7%D9%88%D8%B1_%DA%A9%D9%87_%D8%AF%D8%B1_%D9%81%D8%A7%DB%8C%D9%84_apolloClientjs_%D9%85%D8%B4%D8%AE%D8%B5_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA_%D8%A7%D8%AC%D8%B1%D8%A7_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF_%D8%AA%D8%A7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D8%A8%D8%A7_%D9%85%D9%88%D9%81%D9%82%DB%8C%D8%AA_%D8%A8%D9%87_%D8%A2%D9%86_%D9%85%D8%AA%D8%B5%D9%84_%D8%B4%D9%88%D8%AF\" >\u062a\u0648\u062c\u0647: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 GraphQL \u0634\u0645\u0627 \u0631\u0648\u06cc http:\/\/localhost:4000 (\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0641\u0627\u06cc\u0644 apolloClient.js \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a) \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 \u0622\u0646 \u0645\u062a\u0635\u0644 \u0634\u0648\u062f.<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D9%86_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%BE%D9%88%D8%B4%D9%87_%D9%85%D8%A7_%D8%AE%D9%88%D8%A7%D9%87%D8%AF_%D8%A8%D9%88%D8%AF\"><\/span>\n<p>  \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>- project\/\n  - components\/\n    - Books.js\n  - pages\/\n    - index.js\n  - apolloClient.js\n  - server.js\n  - package.json\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 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u062a\u0627\u0628 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u060c \u0648\u0627\u06a9\u0634\u06cc \u0648 \u062d\u0630\u0641 \u06cc\u06a9 \u06a9\u062a\u0627\u0628 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Nextjs\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Next.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u0622\u0646 \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u062c\u062f\u06cc\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npx create-next-app graphql-next-app\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\u0647 \u0622\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0648\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>cd graphql-next-app\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<ul>\n<li>\u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm install express mongoose next apollo-server-express graphql apollo-client apollo-link-http 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<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 server.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\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<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ApolloServer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">gql<\/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\">apollo-server-express<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">mongoose<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mongoose<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Connect to MongoDB<\/span>\n<span class=\"nx\">mongoose<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mongodb:\/\/localhost\/mydatabase<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">useNewUrlParser<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"na\">useUnifiedTopology<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/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=\"kd\">const<\/span> <span class=\"nx\">typeDefs<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    createBook(title: String!, author: String!): Book\n    updateBook(id: ID!, title: String, author: String): Book\n    deleteBook(id: ID!): Boolean\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">books<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n  <span class=\"p\">{<\/span> <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> <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Book 1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">author<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Author 1<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">{<\/span> <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> <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Book 2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">author<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Author 2<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n<span class=\"p\">];<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">resolvers<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">Query<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">books<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">books<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">book<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">book<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">id<\/span><span class=\"p\">),<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">Mutation<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">createBook<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">author<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">newBook<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">),<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">author<\/span> <span class=\"p\">};<\/span>\n      <span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">newBook<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">newBook<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">updateBook<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">author<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">book<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">book<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">book<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Book not found<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">title<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">author<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">author<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">author<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">book<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">deleteBook<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">parent<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">bookIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">findIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">book<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">bookIndex<\/span> <span class=\"o\">===<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Book not found<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">splice<\/span><span class=\"p\">(<\/span><span class=\"nx\">bookIndex<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">server<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">ApolloServer<\/span><span class=\"p\">({<\/span> <span class=\"nx\">typeDefs<\/span><span class=\"p\">,<\/span> <span class=\"nx\">resolvers<\/span> <span class=\"p\">});<\/span>\n\n<span class=\"nx\">server<\/span><span class=\"p\">.<\/span><span class=\"nx\">applyMiddleware<\/span><span class=\"p\">({<\/span> <span class=\"nx\">app<\/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=\"na\">port<\/span><span class=\"p\">:<\/span> <span class=\"mi\">4000<\/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 ready at http:\/\/localhost:4000<\/span><span class=\"p\">${<\/span><span class=\"nx\">server<\/span><span class=\"p\">.<\/span><span class=\"nx\">graphqlPath<\/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<ul>\n<li>\u06a9\u062f\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc express\u060c ApolloServer\u060c gql (\u0628\u0631\u0686\u0633\u0628 GraphQL) \u0648 mongoose \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 require \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631\u060c \u062a\u0639\u0631\u06cc\u0641 \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0647\u0627\u06cc GraphQL \u0648 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 MongoDB \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0647\u0633\u062a\u0646\u062f.<\/li>\n<li>\u0633\u067e\u0633 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 mongoose \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 mongo db \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u06cc\u0645<\/li>\n<li>\u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 Express \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 app = express () \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.<\/li>\n<li>\u062a\u0627\u0628\u0639 typeDefs gql \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 GraphQL \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u06cc\u06a9 \u0646\u0648\u0639 \u06a9\u062a\u0627\u0628 \u0631\u0627 \u0628\u0627 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0634\u0646\u0627\u0633\u0647\u060c \u0639\u0646\u0648\u0627\u0646 \u0648 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0646\u0648\u0627\u0639 Query \u0648 Mutation \u0631\u0627 \u0628\u0627 \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637\u0647 (\u06a9\u062a\u0627\u0628\u060c \u06a9\u062a\u0627\u0628\u060c createBook\u060c updateBook\u060c deleteBook) \u0648 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0622\u0646\u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u06a9\u062a\u0627\u0628 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u062a\u0627\u0628 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u062d\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/li>\n<li>\u0634\u06cc Resolers \u062a\u0648\u0627\u0628\u0639 \u062d\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627 \u0648 \u062c\u0647\u0634 \u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.  \u062d\u0644\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627 \u0645\u0646\u0637\u0642 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627 \u0648 \u0627\u0646\u062c\u0627\u0645 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0628\u0631\u0627\u06cc \u062c\u0647\u0634\u200c\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u062d\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627 \u062a\u0648\u0627\u0628\u0639\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0622\u0631\u0627\u06cc\u0647 \u06a9\u062a\u0627\u0628 \u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<li>\u06a9\u0644\u0627\u0633 ApolloServer \u0628\u0627 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 (typeDefs) \u0648 \u062d\u0644\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627 (Resolver) \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0646\u0645\u0648\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.  \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0622\u067e\u0648\u0644\u0648 \u0628\u0631\u0627\u06cc \u062e\u062f\u0645\u062a \u0628\u0647 API \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0633\u067e\u0633 \u0633\u0631\u0648\u0631 \u0631\u0627 \u062f\u0631 port:4000 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u0645.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%B3%D8%B1%D9%88%D8%B1_%D8%B1%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u0633\u0631\u0648\u0631 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\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 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>node server.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<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C_GraphQL\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 4: \u0627\u06cc\u062c\u0627\u062f \u0645\u0634\u062a\u0631\u06cc GraphQL<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 apolloClient.js \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f Apollo Client \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\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\">HttpLink<\/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\">client<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">ApolloClient<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">link<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">HttpLink<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">uri<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost:4000\/graphql<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Update with your server URL<\/span>\n  <span class=\"p\">}),<\/span>\n  <span class=\"na\">cache<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">InMemoryCache<\/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\">client<\/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<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D8%AC%D8%B2%D8%A1_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%86%D8%AC%D8%A7%D9%85_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_CRUD\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 5: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 Books.js \u062f\u0631 \u067e\u0648\u0634\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f (\u0627\u06af\u0631 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u067e\u0648\u0634\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f).<\/li>\n<li>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 Books.js \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\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\">useQuery<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useMutation<\/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_BOOKS<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  query {\n    books {\n      id\n      title\n      author\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">CREATE_BOOK<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  mutation CreateBook($title: String!, $author: String!) {\n    createBook(title: $title, author: $author) {\n      id\n      title\n      author\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">UPDATE_BOOK<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  mutation UpdateBook($id: ID!, $title: String, $author: String) {\n    updateBook(id: $id, title: $title, author: $author) {\n      id\n      title\n      author\n    }\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">DELETE_BOOK<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">gql<\/span><span class=\"s2\">`\n  mutation DeleteBook($id: ID!) {\n    deleteBook(id: $id)\n  }\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Books<\/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_BOOKS<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">createBook<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useMutation<\/span><span class=\"p\">(<\/span><span class=\"nx\">CREATE_BOOK<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">updateBook<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useMutation<\/span><span class=\"p\">(<\/span><span class=\"nx\">UPDATE_BOOK<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">deleteBook<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useMutation<\/span><span class=\"p\">(<\/span><span class=\"nx\">DELETE_BOOK<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleCreateBook<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">createBook<\/span><span class=\"p\">({<\/span> <span class=\"na\">variables<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">New Book<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">author<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">New Author<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">New book created:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">createBook<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error creating book:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/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\">handleUpdateBook<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">author<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">updateBook<\/span><span class=\"p\">({<\/span> <span class=\"na\">variables<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">author<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Book updated:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">updateBook<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error updating book:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/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\">handleDeleteBook<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">deleteBook<\/span><span class=\"p\">({<\/span> <span class=\"na\">variables<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Book deleted:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">deleteBook<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error deleting book:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <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=\"p\">{<\/span>\n    <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=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span>  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"na\">Error<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/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\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleCreateBook<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Create<\/span> <span class=\"nx\">Book<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">ul<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">books<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">book<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"nx\">by<\/span> <span class=\"p\">{<\/span><span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">author<\/span><span class=\"p\">}{<\/span><span class=\"dl\">'<\/span><span class=\"s1\"> <\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">handleUpdateBook<\/span><span class=\"p\">(<\/span><span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Updated Title<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Updated Author<\/span><span class=\"dl\">'<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Update<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button&gt;{' '<\/span><span class=\"err\">}\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">handleDeleteBook<\/span><span class=\"p\">(<\/span><span class=\"nx\">book<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Delete<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ul<\/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=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Books<\/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<ul>\n<li>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u0632 useQuery Apollo Client\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628\u200c\u0647\u0627\u06cc Mutation \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u06a9\u062a\u0627\u0628\u060c \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u062a\u0627\u0628 \u062c\u062f\u06cc\u062f\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u062a\u0627\u0628 \u0645\u0648\u062c\u0648\u062f\u060c \u0648 \u062d\u0630\u0641 \u06cc\u06a9 \u06a9\u062a\u0627\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<li>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 gql\u060c \u062a\u0639\u062f\u0627\u062f\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u06a9\u0648\u0626\u0631\u06cc \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.<\/li>\n<li>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u062a\u062f \u0631\u0627 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648\u06cc \u062e\u0648\u062f \u062a\u062e\u0631\u06cc\u0628 \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u0627\u0632 \u0622\u0646 \u0628\u0627 \u0645\u062a\u062f\u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645<\/li>\n<li>\u0633\u067e\u0633 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u06af\u0627\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 BOOK \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631\u0648\u0646 \u0628\u0644\u0648\u06a9 try\/catch \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645.<\/li>\n<li>\u062f\u0631 \u062f\u0627\u062e\u0644 \u0645\u062a\u063a\u06cc\u0631 Object\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0630\u062e\u06cc\u0631\u0647\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u060c \u062d\u0630\u0641 \u06cc\u0627 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/li>\n<li>\u0633\u067e\u0633 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0631\u0631\u0633\u06cc \u0648\u0636\u0639\u06cc\u062a \u0647\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648 \u062e\u0637\u0627 \u0647\u0633\u062a\u06cc\u0645.<\/li>\n<li>\u0633\u067e\u0633 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u0631\u0648\u0634 handleCreateBook \u0631\u0627 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06cc\u06a9 \u06a9\u062a\u0627\u0628 \u0648\u0635\u0644 \u06a9\u0631\u062f\u06cc\u0645.<\/li>\n<li>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc Book \u0631\u0627 \u06a9\u0647 \u0627\u0632 \u062a\u062e\u0631\u06cc\u0628 \u0633\u0627\u062e\u062a\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 useQuery \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0646\u06af\u0627\u0634\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.  \u0647\u0631 \u06a9\u062a\u0627\u0628 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0648 \u062d\u0630\u0641 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u062e\u0648\u062f \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_6_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_Nextjs\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 6: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0635\u0641\u062d\u0627\u062a Next.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0641\u0627\u06cc\u0644 pages\/index.js \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \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=\"k\">import<\/span> <span class=\"nx\">Books<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/components\/Books<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Home<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/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=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Books<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">Books<\/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=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Home<\/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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><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<ul>\n<li>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 http:\/\/localhost:3000 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0631\u0627 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u062f\u0631 GraphQL API \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%AC%D9%87_%D9%85%D8%B7%D9%85%D8%A6%D9%86_%D8%B4%D9%88%DB%8C%D8%AF_%DA%A9%D9%87_%D8%B3%D8%B1%D9%88%D8%B1_GraphQL_%D8%B4%D9%85%D8%A7_%D8%B1%D9%88%DB%8C_http_localhost_4000_%D9%87%D9%85%D8%A7%D9%86%D8%B7%D9%88%D8%B1_%DA%A9%D9%87_%D8%AF%D8%B1_%D9%81%D8%A7%DB%8C%D9%84_apolloClientjs_%D9%85%D8%B4%D8%AE%D8%B5_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA_%D8%A7%D8%AC%D8%B1%D8%A7_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF_%D8%AA%D8%A7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D8%A8%D8%A7_%D9%85%D9%88%D9%81%D9%82%DB%8C%D8%AA_%D8%A8%D9%87_%D8%A2%D9%86_%D9%85%D8%AA%D8%B5%D9%84_%D8%B4%D9%88%D8%AF\"><\/span>\n<p>  \u062a\u0648\u062c\u0647: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 GraphQL \u0634\u0645\u0627 \u0631\u0648\u06cc http:\/\/localhost:4000 (\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0641\u0627\u06cc\u0644 apolloClient.js \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a) \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 \u0622\u0646 \u0645\u062a\u0635\u0644 \u0634\u0648\u062f.<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc\u200c\u06af\u0648\u06cc\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Full Stack \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 GraphQL\u060c Express JS\u060c MongoDB \u0648 Next JS \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f.<\/p>\n<p>\u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u06cc\u062f \u0645\u062a\u0634\u06a9\u0631\u0645<br \/>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f &#8211;<br \/>\u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645 &#8211; https:\/\/www.instagram.com\/supremacism__shubh\/<br \/>\u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646 &#8211; https:\/\/www.linkedin.com\/in\/shubham-tiwari-b7544b193\/<br \/>\u0627\u06cc\u0645\u06cc\u0644 &#8211; shubhmtiwri00@gmail.com<\/p>\n<p>^^\u0645\u06cc\u062a\u0648\u0646\u06cc\u062f \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0632\u06cc\u0631 \u06a9\u0645\u06a9\u0645 \u06a9\u0646\u06cc\u062f \u0645\u0645\u0646\u0648\u0646\ud83d\udc47\ud83d\udc47 ^^<br \/>\u2615 &#8211;> https:\/\/www.buymeacoffee.com\/waaduheck <--<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<br \/>https:\/\/dev.to\/shubhamtiwari909\/website-components-you-should-know-25nm<\/p>\n<p>https:\/\/dev.to\/shubhamtiwari909\/smooth-scrolling-with-js-n56<\/p>\n<p>https:\/\/dev.to\/shubhamtiwari909\/swiperjs-3802<\/p>\n<p>https:\/\/dev.to\/shubhamtiwari909\/custom-tabs-with-sass-and-javascript-4dej<\/p>\n<\/p><\/div>\n<p><script async defer src=\"https:\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647 \u0627\u0645\u0631\u0648\u0632 \u0645\u0646 \u062f\u0631 \u0645\u0648\u0631\u062f GraphQL API \u0628\u0627 Next JS \u0628\u062d\u062b \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f. GraphQL \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0628\u0631\u0627\u06cc API \u0647\u0627 (Application Programming Interface) \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0646\u0639\u0637\u0641 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. GraphQL \u062a\u0648\u0633\u0637 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":27111,"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-27110","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\/27110","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=27110"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/27110\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/27111"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=27110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=27110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=27110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}