Apollo GraphQL: كيفية إنشاء تطبيق مكدس كامل باستخدام React و Node Js

Apollo Client عبارة عن مكتبة إدارة حالة كاملة لتطبيقات JavaScript. إنها أداة قوية حيث يمكن استخدامها على كل من الواجهة الخلفية والجانب الأمامي.

في هذا البرنامج التعليمي ، سنستخدمه في الواجهة الأمامية والخلفية من خلال بناء خادم Apollo GraphQL مع Node JS. ثم سنستهلك البيانات من جانب العميل باستخدام React JS.

إذا كنت جديدًا في GraphQl ، فقد يساعدك هذا البرنامج التعليمي. وإلا فلنبدأ.

  • بناء الخادم باستخدام Apollo و Node و GraphQl
  • مخطط GraphQl
  • محللات GraphQl
  • إنشاء خادم أبولو
  • بناء جانب العميل مع React
  • ربط React بـ Apollo
  • إحضار البيانات
  • إظهار البيانات

بناء الخادم باستخدام Apollo و Node و GraphQl

في هذا الدليل ، سأستخدم Github API لعرض البيانات ، وسيتم تنفيذ هذه العملية بواسطة خادم GraphQl المصمم باستخدام Apollo و Node JS.

لتحقيق ذلك ، نحتاج إلى تشغيل الأمر التالي على الجهاز الطرفي لإعداد مشروع Node JS جديد:

 yarn init 

بمجرد الانتهاء من الإعداد ، يمكننا الآن تثبيت الحزم الضرورية عن طريق تشغيل هذا الأمر:

 yarn add apollo-server graphql axios 

رائع ، لدينا الآن كل ما نحتاجه لبناء خادم. لذلك دعونا أولاً ننشئ ملفًا جديدًا app.jsفي الجذر والذي سيكون نقطة دخول خادمنا.

بعد ذلك ، نحتاج إلى تحديد مخطط Graphql الذي يعكس الطريقة التي يجب أن تظهر بها بياناتنا.

مخطط GraphQl

يصف المخطط شكل الرسم البياني للبيانات الخاصة بك. يحدد مجموعة من الأنواع مع الحقول التي يتم ملؤها من مخازن البيانات الخلفية. لذلك ، دعنا نضيف مخططًا جديدًا في app.jsالملف.

  • app.js
const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` 

كما ترى ، لا نستخدم جميع البيانات التي توفرها Github API. نحتاج فقط إلى المعرف الذي سيتم استخدامه كمفتاح مرجعي في تطبيق React ، وتسجيل الدخول ، و avatar_url. لدينا أيضًا استعلام usersيعرض مجموعة من المستخدمين.

الآن بعد أن أصبح لدينا مخطط GraphQL ، فقد حان الوقت لبناء وحدات الحل المقابلة لإكمال عملية الاستعلام.

محللات GraphQl

وحدة الحل عبارة عن مجموعة من الوظائف التي تساعد في إنشاء استجابة من استعلام GraphQL. لذا ، دعنا نضيف محللًا جديدًا في app.jsالملف.

  • app.js
const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } 

يجب أن يتطابق المحلل مع المخطط المناسب بالاسم. لذلك ، usersيشير هنا إلى usersالاستعلام المحدد في مخططنا. إنها وظيفة تجلب البيانات من واجهة برمجة التطبيقات بمساعدة axiosوتعود كما هو متوقع المعرف وتسجيل الدخول و avatar_url.

وقد تستغرق هذه العملية وقتًا حتى تكتمل. هذا هو سبب استخدام async / await هنا للتعامل معها.

مع ذلك ، يمكننا الآن إنشاء خادم Apollo في القسم التالي.

إنشاء خادم أبولو

إذا كنت تتذكر ، في app.jsالملف ، قمنا بالاستيراد ApolloServerمن apollo-serverالحزمة. إنه مُنشئ يتلقى الكائن كوسيطة. ويجب أن يحتوي هذا الكائن على المخطط والمحلل لتتمكن من إنشاء الخادم.

لذا ، دعنا نعدل app.jsقليلاً مع ApolloServer.

  • app.js
const server = new ApolloServer({ typeDefs, resolvers, }) // typeDefs: typeDefs, // resolvers: resolvers server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

هنا ، نمرر كمعامل كائنًا يحمل المخطط والمحلل ApolloServerلإنشاء الخادم ثم يستمع إليه. مع تطبيق ذلك ، لدينا الآن خادم وظيفي للعمل معه.

يمكنك بالفعل اللعب بها وإرسال الاستعلامات بمساعدة GraphQL playground عن طريق تشغيل هذا الأمر:

 yarn start 

يمكنك الآن معاينته على //localhost:400

  • app.jsالملف الكامل
const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } const server = new ApolloServer({ typeDefs, resolvers, }) server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

الخادم وحده لا يفعل الكثير. نحتاج إلى إضافة برنامج نصي للبدء في package.jsonالملف ، كما توقعت ، لبدء الخادم.

  • package.json
 // first add nodemon: yarn add nodemon --dev "scripts": { "start": "nodemon src/index.js" } 

مع ذلك ، لدينا خادم لجلب البيانات من Github API. لذا حان الوقت الآن للانتقال إلى جانب العميل واستهلاك البيانات.

لنفعلها.

ياي

بناء جانب العميل مع React

أول شيء يتعين علينا القيام به هو إنشاء تطبيق React جديد عن طريق تشغيل الأمر التالي في الجهاز:

npx create-react-app client-react-apollo 

بعد ذلك ، نحتاج إلى تثبيت حزم Apollo و GraphQl:

 yarn add apollo-boost @apollo/react-hooks graphql 

الآن ، يمكننا توصيل Apollo بتطبيق React عن طريق تحديث index.jsالملف.

ربط React بـ Apollo

  • index.js
import React from 'react'; import ReactDOM from 'react-dom'; import ApolloClient from 'apollo-boost' import { ApolloProvider } from '@apollo/react-hooks'; import App from './App'; import './index.css'; import * as serviceWorker from './serviceWorker'; const client = new ApolloClient({ uri: '//7sgx4.sse.codesandbox.io' }) ReactDOM.render(     , document.getElementById('root') ); serviceWorker.unregister(); 

As you can see, we start by importing ApolloClient and ApolloProvider. The first helps us inform Apollo about which URL to use when fetching data. And if no uri is passed to ApolloClient, it will take the current domain name plus /graphql.

The second is the Provider which expects to receive the client object to be able to connect Apollo to React.

That said, we can now create a component that shows the data.

Fetching the data

  • App.js
import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` 

Here, we have a simple GraphQL query that fetches the data. That query will be passed later to useQuery to tell Apollo which data to fetch.

  • App.js
const User = ({ user: { login, avatar_url } }) => ( 

{login}

See profile )

This presentational component will be used to display a user. It receives the data from the App component and displays it.

Showing the data

  • App.js
function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 

Something went wrong!

if (loading) return

Loading...

return (

Github | Users

{data.users.map(user => ( ))} ) } export default App

يتلقى useQueryالخطاف الذي يوفره Apollo استعلام GraphQL ويعيد ثلاث حالات: التحميل والخطأ والبيانات.

إذا تم جلب البيانات بنجاح ، فإننا نمررها إلى مكون المستخدم. وإلا فإننا نخطئ.

  • App.jsالملف الكامل
import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` const User = ({ user: { login, avatar_url } }) => ( 

{login}

See profile ) function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return

Something went wrong!

if (loading) return

Loading...

return (

Github | Users

{data.users.map(user => ( ))} ) } export default App

عظيم! بهذا نكون قد انتهينا من بناء تطبيق Apollo GraphQL كامل المكدس باستخدام React و Node JS.

قم بمعاينة خادم Apollo GraphQL هنا

قم بمعاينة تطبيق React هنا

ابحث عن شفرة المصدر هنا

يمكنك العثور على محتوى رائع آخر مثل هذا في مدونتي

شكرا للقراءة!

مبروك