{"id":62946,"date":"2024-04-10T12:57:41","date_gmt":"2024-04-10T09:27:41","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/apollo-graphql-setup-reactjs-4hid\/"},"modified":"2024-04-10T12:57:41","modified_gmt":"2024-04-10T09:27:41","slug":"apollo-graphql-setup-reactjs-4hid","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/apollo-graphql-setup-reactjs-4hid\/","title":{"rendered":"Apollo GraphQL – \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc ReactJS"},"content":{"rendered":"
\n

1. Dependencies \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong><\/p>\n

\n
npm install @apollo\/client graphql\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0622\u067e\u0648\u0644\u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/strong><\/p>\n
\n
\/\/ index.js or App.js\n\nimport React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo\/client';\nimport App from '.\/App';\n\nconst client = new ApolloClient({\n  uri: 'YOUR_GRAPHQL_ENDPOINT_URI',\n  cache: new InMemoryCache()\n});\n\nReactDOM.render(\n  <ApolloProvider client={client}>\n    <App \/>\n  <\/ApolloProvider>,\n  document.getElementById('root')\n);\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u06a9\u0648\u0626\u0631\u06cc \u0647\u0627\u06cc GraphQL \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f<\/strong><\/p>\n
\n
\/\/ queries.js\n\nimport { gql } from '@apollo\/client';\n\nexport const GET_BOOKS = gql`\n  query GetBooks {\n    books {\n      title\n      author\n    }\n  }\n`;\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
4. \u0627\u0632 Query Component \u06cc\u0627 Hooks \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/strong>
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 useQuery:<\/p>\n
\n
import React from 'react';\nimport { useQuery } from '@apollo\/client';\nimport { GET_BOOKS } from '.\/queries';\n\nconst BookList = () => {\n  const { loading, error, data } = useQuery(GET_BOOKS);\n\n  if (loading) return <p>Loading...<\/p>;\n  if (error) return <p>Error :(<\/p>;\n\n  return (\n    <div>\n      {data.books.map((book, index) => (\n        <div key={index}>\n          <h3>{book.title}<\/h3>\n          <p>{book.author}<\/p>\n        <\/div>\n      ))}\n    <\/div>\n  );\n};\n\nexport default BookList;\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 Query:<\/p>\n
\n
import React from 'react';\nimport { Query } from '@apollo\/client\/react\/components';\nimport { GET_BOOKS } from '.\/queries';\n\nconst BookList = () => (\n  <Query query={GET_BOOKS}>\n    {({ loading, error, data }) => {\n      if (loading) return <p>Loading...<\/p>;\n      if (error) return <p>Error :(<\/p>;\n\n      return (\n        <div>\n          {data.books.map((book, index) => (\n            <div key={index}>\n              <h3>{book.title}<\/h3>\n              <p>{book.author}<\/p>\n            <\/div>\n          ))}\n        <\/div>\n      );\n    }}\n  <\/Query>\n);\n\nexport default BookList;\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
5. \u062c\u0647\u0634 \u0647\u0627 \u0648 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627<\/strong><\/p>\n
\u0628\u0631\u0627\u06cc \u062c\u0647\u0634\u200c\u0647\u0627 \u0648 \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u0647\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0642\u0644\u0627\u0628\u200c\u0647\u0627\u06cc useMutation \u0648 useSubscription \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u062a\u0648\u0633\u0637 Apollo Client \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
1. Dependencies \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f npm install @apollo\/client graphql \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f \u0622\u067e\u0648\u0644\u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f \/\/ index.js or App.js import React from ‘react’; import { ApolloClient, InMemoryCache, ApolloProvider } from ‘@apollo\/client’; import App from ‘.\/App’; const client = new ApolloClient({ uri: ‘YOUR_GRAPHQL_ENDPOINT_URI’, cache: new InMemoryCache() …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-62946","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/62946","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=62946"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/62946\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=62946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=62946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=62946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}