{"id":372416,"date":"2024-05-21T05:11:40","date_gmt":"2024-05-21T05:11:40","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=372416"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T05:11:40","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=372416","title":{"rendered":"\u041f\u043e\u0447\u0435\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 Relay \u0438 GraphQL \u0441\u043d\u043e\u0432\u0430<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0430\u0432\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u043e\u0439, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u0430\u0441\u0442\u0438\u0439 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f GraphQL, REST, tRPC \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f Relay \u0438 Fragments. \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u0447\u0438\u0442\u0430\u044e Relay \u043f\u0435\u0440\u0435\u043b\u043e\u043c\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0435 \u0432 100 \u0440\u0430\u0437 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u043c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n

\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Relay \u0442\u0430\u043a\u0438\u043c \u043e\u0441\u043e\u0431\u044b\u043c?<\/h3>\n

\u041f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u044c\u0442\u0435 \u043d\u0430 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 API \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0438 API \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0442 \u0433\u0434\u0435 \u0441\u0438\u044f\u0435\u0442 Relay, \u0432\u043e\u0442 \u0433\u0434\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 Relay, REST, tRPC \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438.<\/p>\n

\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 Relay, \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043e\u0441\u043e\u0437\u043d\u0430\u0432\u0430\u043b\u0438, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0449\u043d\u044b\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c GraphQL \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 Relay. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u043e, \u043f\u043e\u0447\u0435\u043c\u0443.<\/p>\n

\u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u043e\u0433\u0438\u0435 \u043b\u044e\u0434\u0438 \u0431\u043e\u044f\u0442\u0441\u044f Relay, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u043a\u0440\u0443\u0442\u0430\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u0435\u043d\u0438\u0435, \u0447\u0442\u043e Relay \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0438 \u044d\u0442\u043e \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u0435\u0440\u0435 \u043f\u0440\u0430\u0432\u0434\u0430. \u041d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043a\u0442\u043e\u0440\u0441\u043a\u0438\u0445 \u0441\u0442\u0435\u043f\u0435\u043d\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n

\u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e Relay \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 WunderGraph, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0441 NextJS, \u0442\u0430\u043a \u0438 \u0441 \u0447\u0438\u0441\u0442\u044b\u043c React (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Vite). \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c Relay \u0431\u043e\u043b\u0435\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0438 \u043b\u0435\u0433\u043a\u0438\u043c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0422\u0430\u043a\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u0430\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (SSR), \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 (SSG), \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (persisted Operations) \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f (\u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043a\u0430\u043a Suspense), \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/p>\n

\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u043c\u0441\u044f \u0432 \u0442\u043e, \u043a\u0430\u043a \u043c\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Relay, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Relay \u0442\u0430\u043a\u0438\u043c \u043e\u0441\u043e\u0431\u044b\u043c.<\/p>\n

\u0420\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n

\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a NextJS, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u0430\u043a tRPC, \u0432\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0434\u0435\u0442\u044f\u043c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u044b \u043d\u0435\u044f\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n

\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u043b\u043e\u0433\u043e\u0432, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u0433 \u0438\u043c\u0435\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432.<\/p>\n

\u0412 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0432\u044b \u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0431\u043b\u043e\u0433\u0438 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u043b\u043e\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f.<\/p>\n

\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n

\/\/ in pages\/index.tsx export default function Home({ posts }: { posts: Post[] }) {   return (     <div>       {posts.map((post) => (         <BlogPost key={post.id} post={post} \/>       ))}     <\/div>   ); }  \/\/ in components\/BlogPost.tsx export default function BlogPost({ post }: { post: Post }) {   return (     <div>       <h1>{post.title}<\/h1>       <p>{post.content}<\/p>       <div>         {post.comments.map((comment) => (           <Comment key={comment.id} comment={comment} \/>         ))}       <\/div>     <\/div>   ); }  \/\/ in components\/Comment.tsx export default function Comment({ comment }: { comment: Comment }) {   return (     <div>       <h2>{comment.title}<\/h2>       <p>{comment.content}<\/p>     <\/div>   ); } <\/code><\/pre>\n
\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code> \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445: title<\/code> \u0438 content<\/code>. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 10 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, author<\/code>, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code>, \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0435 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435.<\/p>\n
\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u044d\u0442\u043e\u043c\u0443, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0441\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n
\u0421 Relay \u0438 Fragments \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043e\u0442\u0432\u044f\u0437\u044b\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b), \u044d\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0440\u044b\u0432\u043e\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0430\u043c GraphQL \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 GraphQL \u043d\u0435 \u043f\u043e\u043e\u0449\u0440\u044f\u044e\u0442 \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u0435\u043c \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0441 REST API.<\/p>\n
\u0422\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 «\u0411\u043e\u0433-\u0437\u0430\u043f\u0440\u043e\u0441\u044b», \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u044e\u0442 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 GraphQL. \u0411\u0435\u0437 Fragments \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0430 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0447\u0442\u043e \u0438 \u0441 REST API \u0438\u043b\u0438 tRPC, \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0445\u043e\u0434\u0430\u043c\u0438 GraphQL.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Relay \u0438 Fragments.<\/p>\n
\/\/ in pages\/index.tsx export default function Home() {   const data = useFragment(     graphql`       query Home_posts on Query {         posts {           ...BlogPost_post         }       }     `,     null   );    return (     <div>       {data.posts.map((post) => (         <BlogPost key={post.id} post={post} \/>       ))}     <\/div>   ); }  \/\/ in components\/BlogPost.tsx export default function BlogPost({ post }: { post: Post }) {   const data = useFragment(     graphql`       fragment BlogPost_post on Post {         title         content         comments {           ...Comment_comment         }       }     `,     post   );    return (     <div>       <h1>{data.title}<\/h1>       <p>{data.content}<\/p>       <div>         {data.comments.map((comment) => (           <Comment key={comment.id} comment={comment} \/>         ))}       <\/div>     <\/div>   ); }  \/\/ in components\/Comment.tsx export default function Comment({ comment }: { comment: Comment }) {   const data = useFragment(     graphql`       fragment Comment_comment on Comment {         title         content       }     `,     comment   );    return (     <div>       <h2>{data.title}<\/h2>       <p>{data.content}<\/p>     <\/div>   ); } <\/code><\/pre>\n
\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0434\u0435\u043b\u0435\u043d \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code> \u0432 \u043b\u044e\u0431\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u0441\u0442, \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0434\u0435\u043b\u0435\u043d \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
\u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0435 author<\/code>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Comment<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435.<\/p>\n
\u041c\u0435\u043d\u044f\u044f \u043d\u0430\u0448\u0443 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0443 \u043d\u0430 \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Home<\/code> \u043d\u0435 \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u044f \u043d\u0443\u0436\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 Comment<\/code>. \u042d\u0442\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0430 \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Home<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n
\u0421\u043a\u0430\u0437\u0430\u0432 \u044d\u0442\u043e, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b: \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n
\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432. \u041e\u0431\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u0432\u043e\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435. \u041e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u043b\u0435 title<\/code>, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u043b\u044f author<\/code> \u0438 content<\/code>.<\/p>\n
\u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u043e\u0431\u043e\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0435 title<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u043e \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0431\u044b \u0432\u0432\u0435\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n
\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u044d\u0442\u043e, Relay \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434 \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u043f\u043e\u043b\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435, \u043e\u043d \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0434\u043e\u0441\u0442\u0443\u043f, \u0445\u043e\u0442\u044f \u043e\u043d\u043e \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
\u041d\u0430 \u043c\u043e\u0435\u043c \u0441\u0447\u0435\u0442\u0443, \u043d\u0438 \u043e\u0434\u0438\u043d \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 API \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 GraphQL, \u043d\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0432 Relay. GraphQL \u0438 Relay \u0441\u0442\u043e\u044f\u0442 \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u043d\u0435\u0433, \u0435\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0438\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 tRPC. \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u044d\u0442\u043e \u0442\u043e\u0433\u043e.<\/p>\n
\u041c\u043d\u043e\u0433\u0438\u0435 \u043b\u044e\u0434\u0438 \u0434\u0443\u043c\u0430\u044e\u0442, \u0447\u0442\u043e GraphQL \u0438 Relay \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u042f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0435. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 — \u044d\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0441\u043f\u043e\u0441\u043e\u0431\u0443 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0449\u0438.<\/p>\n
\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u043a\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Relay \u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n
\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c GraphQL \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/h4>\n
\u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Relay \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e «Relay Compiler» (\u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Rust) \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u0421 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e «\u0443\u0434\u0430\u043b\u0438\u0442\u044c» API GraphQL \u0438\u0437 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u044b. \u042d\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API GraphQL \u0438\u0437\u0432\u043d\u0435.<\/p>\n
\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u0441\u043d\u0438\u0436\u0430\u044f \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n
\u041a\u0430\u043a WunderGraph \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Relay?<\/h3>\n
\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0435\u0449\u0435 \u043d\u0435 \u0443\u0431\u0435\u0434\u0438\u043b\u0438\u0441\u044c \u0432 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 Relay, \u043d\u043e \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0442\u044f \u0431\u044b \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 WunderGraph \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Relay.<\/p>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Relay + NextJS\/Vite \u0441 WunderGraph \u043f\u0440\u043e\u0441\u0442\u0430<\/h4>\n
\u041c\u044b \u0441\u0430\u043c\u0438 \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Relay \u0441 NextJS \u0438 Vite. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e. \u041c\u044b \u043d\u0430\u0448\u043b\u0438 \u043f\u0430\u043a\u0435\u0442\u044b npm, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c \u0440\u0430\u0437\u0440\u044b\u0432 \u043c\u0435\u0436\u0434\u0443 Relay \u0438 NextJS, \u043d\u043e \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0439 \u0438, \u0447\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043c\u044b \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438, \u0447\u0442\u043e \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u043d\u0443\u0436\u0434\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c getInitalProps<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u0440\u0435\u043b \u0432 NextJS.<\/p>\n
\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043e\u0442\u043e\u0448\u043b\u0438 \u043d\u0430 \u0448\u0430\u0433 \u043d\u0430\u0437\u0430\u0434 \u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 Vanilla React \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a NextJS \u0438 Vite, \u043d\u0435 \u0431\u0443\u0434\u0443\u0447\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (SSR), \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 (SSG) \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043b\u0435\u0433\u043a\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441 \u043b\u044e\u0431\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n
\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u0443\u0431\u0435\u0434\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0435\u0437 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043f\u044b\u0442, \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u044f\u0441\u044c \u043e\u0431 \u044d\u0442\u043e\u043c.<\/p>\n
\u0418\u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430?<\/p>\n
\/\/ in pages\/_app.tsx import { WunderGraphRelayProvider } from '@\/lib\/wundergraph'; import '@\/styles\/globals.css'; import type { AppProps } from 'next\/app';  export default function App({ Component, pageProps }: AppProps) { return ( <WunderGraphRelayProvider initialRecords={pageProps.initialRecords}> <Component {...pageProps} \/> <\/WunderGraphRelayProvider> ); } <\/code><\/pre>\n
\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435. \u0412\u0441\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e WunderGraphRelayProvider<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c prop initialRecords<\/code>. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 NextJS 12, 13, Vite \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u043b\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 API.<\/p>\n
\u0414\u0430\u043b\u0435\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Relay \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 WunderGraph. \u041a\u0430\u043a \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, WunderGraph \u0438 Relay — \u044d\u0442\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 \u043d\u0435\u0431\u0435\u0441\u0430\u0445. \u041e\u0431\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432: \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n
Relay \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c \u0431\u044d\u043a\u0435\u043d\u0434\u0430 WunderGraph. WunderGraph \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e GraphQL & REST API \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0432 \u0432\u0438\u0434\u0435 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u044b GraphQL, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0433\u0440\u0430\u0444\u043e\u043c. \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u0443 \u0441\u0445\u0435\u043c\u0443 GraphQL \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u043c \u0435\u0435 \u0432 \u0444\u0430\u0439\u043b, \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0432 IDE \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 Relay.<\/p>\n
\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u044b \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c API GraphQL \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e API RPC, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL. \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043a\u0430\u043a WunderGraph, \u0442\u0430\u043a \u0438 Relay \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0439.<\/p>\n
\n
\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e WunderGraph — \u044d\u0442\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 Relay.<\/p>\n<\/blockquote>\n
\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 Relay \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438<\/h4>\n
\u0418\u0442\u0430\u043a, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Relay \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 WunderGraph?<\/p>\n
\u041a\u0430\u043a \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, WunderGraph \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443 Relay, \u0433\u0434\u0435 «\u0445\u0440\u0430\u043d\u0438\u0442\u044c» \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, Relay \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c, \u0433\u0434\u0435 \u043d\u0430\u0439\u0442\u0438 \u0441\u0445\u0435\u043c\u0443 GraphQL. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 WunderGraph \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0445\u0435\u043c\u0443 GraphQL \u0432 \u0444\u0430\u0439\u043b\u0435, \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u043e\u0431\u043e\u0438\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u0434\u0435\u043b relay<\/code> \u0432 package.json<\/code>.<\/p>\n
{   \"relay\": {     \"src\": \".\/src\",     \"artifactDirectory\": \".\/src\/__relay__generated__\",     \"language\": \"typescript\",     \"schema\": \".\/.wundergraph\/generated\/wundergraph.schema.graphql\",     \"exclude\": [       \"**\/node_modules\/**\",       \"**\/__mocks__\/**\",       \"**\/__generated__\/**\",       \"**\/.wundergraph\/generated\/**\"     ],     \"persistConfig\": {       \"file\": \".\/.wundergraph\/operations\/relay\/persisted.json\"     },     \"eagerEsModules\": true   } } <\/code><\/pre>\n
\u0421 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Relay \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 .\/src<\/code>, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u044b TypeScript \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 .\/.wundergraph\/operations\/relay\/persisted.json<\/code>. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f — \u044d\u0442\u043e \u043f\u0430\u0440\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e ID (\u0445\u0435\u0448) \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL. WunderGraph \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b, \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442 \u0435\u0433\u043e \u0432 .graphql<\/code> \u0444\u0430\u0439\u043b\u044b \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0438\u0445 \u0432 .\/.wundergraph\/operations\/relay\/<\/code>, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u043a\u0430\u043a \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 JSON-RPC.<\/p>\n
\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 WunderGraph \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u043b\u044f \u0432\u0430\u0441 WunderGraphRelayEnvironment<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 fetch \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u0432 RPC \u043a API WunderGraph.<\/p>\n
\u0412\u043e\u0442 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n
const fetchQuery: FetchFunction = async (params, variables) => { const { id, operationKind } = params; const response = operationKind === 'query' ? await client.query({ operationName: `relay\/${id}`, input: variables,   }) : await client.mutate({ operationName: `relay\/${id}`, input: variables,   }); return { ...response, errors: response.error ? [response.error] : [], }; }; <\/code><\/pre>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f fetchQuery<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b JSON-RPC \u0438\u0437 ID \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 GraphQL \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n
\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (SSR) \u0441 NextJS, Relay \u0438 WunderGraph<\/h4>\n
\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Relay, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e Relay \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 NextJS, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (SSR).<\/p>\n
import { graphql } from 'react-relay'; import { pagesDragonsQuery as PagesDragonsQueryType } from '..\/__relay__generated__\/pagesDragonsQuery.graphql'; import { Dragon } from '@\/components\/Dragon'; import { fetchWunderGraphSSRQuery } from '@\/lib\/wundergraph'; import { InferGetServerSidePropsType } from 'next';  const PagesDragonsQuery = graphql` query pagesDragonsQuery { spacex_dragons { ...Dragons_display_details } } `;  export async function getServerSideProps() { const relayData = await fetchWunderGraphSSRQuery<PagesDragonsQueryType>(PagesDragonsQuery);  return { props: relayData, }; }  export default function Home({ queryResponse }: InferGetServerSidePropsType<typeof getServerSideProps>) {     return (         <div>             {queryResponse.spacex_dragons.map((dragon) => (                 <Dragon key={dragon.id} dragon={dragon} \/>             ))}         <\/div>     ); } <\/code><\/pre>\n
\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441 Vite, Relay \u0438 WunderGraph<\/h4>\n
\u0412\u043e\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Vite \u0441 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n
import { graphql, loadQuery } from 'react-relay'; import { getEnvironment, useLiveQuery } from '..\/lib\/wundergraph'; import { Dragon } from '.\/Dragon'; import { DragonsListDragonsQuery as DragonsListDragonsQueryType } from '..\/__relay__generated__\/DragonsListDragonsQuery.graphql';  const AppDragonsQuery = graphql` query DragonsListDragonsQuery { spacex_dragons { ...Dragons_display_details } } `;  const dragonsListQueryReference = loadQuery<DragonsListDragonsQueryType>(getEnvironment(), AppDragonsQuery, {});  export const DragonsList = () => { const { data } = useLiveQuery<DragonsListDragonsQueryType>({ query: AppDragonsQuery, queryReference: dragonsListQueryReference, });  return ( <div> <p>Dragons:<\/p> {data?.spacex_dragons?.map((dragon, dragonIndex) => { if (dragon) return <Dragon key={dragonIndex.toString()} dragon={dragon} \/>; return null; })} <\/div> ); }; <\/code><\/pre>\n
\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n
\u0412\u0430\u0448\u0438\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0442\u043e, \u0447\u0442\u043e GraphQL \u0438 Relay \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043c\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 WunderGraph \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u043d\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0440\u0435\u0445 \u043f\u0440\u043e\u0447\u043d\u044b\u0445 \u0441\u0442\u043e\u043b\u043f\u043e\u0432:<\/p>\n