
عُرض علي التعرف على GraphQL. تحقق مما إذا كان يمكنك تقديم طلب في العمل. بعد البحث ، أدركت أن معظم المعلومات باللغة الإنجليزية وقديمة جزئيًا ، وهناك 3 إصدارات من المكتبة ، وهناك بالفعل 5. أريد سد هذه الفجوة. في هذا الخيار ، سيكون هناك مثال على servlets ، أي بدون ربيع وبدون حذاء ربيعي.
الجزء النظري:
GraphQL - نظرة جديدة على API. الجزء 1 من
VladimirZaetsمقارنة بائسة بين REST و GraphQLسأعرض لك الشفرة على الفور ، لأن GraphQL عبارة عن تجريد. وإذا ناقشت التجريد لفترة طويلة ، فقد تضيع. الأصل
هنا .
لقد غيرت الرمز قليلاً ، لأنه لا تحتوي الإصدارات الأحدث على بعض الفئات.
إنشاء مشروع مخضرم فارغ. أضف تبعيات للنزهة:
<dependency> <groupId>com.graphql-java</groupId> <artifactId>graphql-java</artifactId> <version>8.0</version> </dependency> <dependency> <groupId>com.graphql-java</groupId> <artifactId>graphql-java-tools</artifactId> <version>5.0.0</version> </dependency> <dependency> <groupId>com.graphql-java</groupId> <artifactId>graphql-java-servlet</artifactId> <version>5.0.0</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.0.1</version> <scope>provided</scope> </dependency>
لكي لا تفكر في الخادم ، خذ رصيفًا:
<plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.4.6.v20170531</version> </plugin>
الاختلافات في البرنامج التعليمي:
- الميراث من SimpleGraphQLServlet مع استدعاء المنشئ أصبح "موقوفًا" ، يجب عليك استخدام أداة البناء ، وهو أمر مستحيل مع الميراث ، استخدم التكوين.
- في servlet ، يمكنك تكوين عنصر SimpleGraphQLServlet.
- GraphQLRootResolver - لا أكثر ، يمكنك استخدام أنواع محددة: GraphQLMutationResolver و GraphQLQueryResolver
الأساس جاهز. سنفعل وفقا للبرنامج التعليمي ، دون الربيع أو JAX-RS. بشكل عام ، servlet العادية:
@WebServlet(urlPatterns = "/graphql") public class GraphQLEndpoint extends HttpServlet { private SimpleGraphQLServlet graph; public GraphQLEndpoint() { graph = SimpleGraphQLServlet.builder(buildSchema()).build(); } private static GraphQLSchema buildSchema() { LinkRepository linkRepository = new LinkRepository(); return SchemaParser.newParser() .file("schema.graphqls") .resolvers(new Query(linkRepository), new Mutation(linkRepository)) .build() .makeExecutableSchema(); } @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { graph.service(req, resp); } }
في ذلك ، تقوم طريقة الخدمة بتمرير البيانات إلى SimpleGraphQLServlet. كل شيء في هذا العمل ينتهي.
الرمز العادي (Link و LinkRepository) public class Link { private final String url; private final String description; public Link(String url, String description) { this.url = url; this.description = description; } public String getUrl() { return url; } public String getDescription() { return description; } }
public class LinkRepository { private final List<Link> links; public LinkRepository() { links = new ArrayList<>();
الآن رمز الطلب (طلبات GET في REST) والطفرات (طلبات التغييرات) import com.coxautodev.graphql.tools.GraphQLQueryResolver; public class Query implements GraphQLQueryResolver { private final LinkRepository linkRepository; public Query(LinkRepository linkRepository) { this.linkRepository = linkRepository; } public List<Link> allLinks() { return linkRepository.getAllLinks(); } }
import com.coxautodev.graphql.tools.GraphQLMutationResolver; public class Mutation implements GraphQLMutationResolver { private final LinkRepository linkRepository; public Mutation(LinkRepository linkRepository) { this.linkRepository = linkRepository; } public Link createLink(String url, String description) { Link newLink = new Link(url, description); linkRepository.saveLink(newLink); return newLink; } }
نبدأ من خلال رصيف: تشغيل ونرمي الطلب:
http://localhost:8080/graphql?query={allLinks{url}}
نحصل على الجواب:
{"data": {"allLinks": [ {"url":"http://howtographql.com"}, {"url":"http://graphql.org/learn/"} ] } }
وإليك النقطة الرئيسية الأولى: لدينا حقلين وعنوان url ووصف ، وتلقينا عنوان url فقط كرد. وهذا صحيح ، لأننا فقط عنوان url وطلبنا {allLinks {url}} في الطلب. إذا قمت بتغيير الطلب إلى:
http://localhost:8080/graphql?query={allLinks{url,description}}
الجواب:
{"data": {"allLinks": [ { "url":"http://howtographql.com", "description":"Your favorite GraphQL page" }, { "url":"http://graphql.org/learn/", "description":"The official docks" } ] } }
الآن لدينا عنوان URL ووصف. وكل ذلك لأننا سألناهم.
طلب تغيير البيانات.
إنه أكثر تعقيدًا وأسهل بكثير من استخدام الأداة المساعدة لواجهة المستخدم.
1. نذهب إلى
العنوان2. انسخ ملف index.html بالكامل
3. استبدال سطرين:
هذه هي:
<link rel="stylesheet" href="./node_modules/graphiql/graphiql.css" /> <script src="./node_modules/graphiql/graphiql.js"></script>
على هذه:
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphiql@0.11.2/graphiql.css" /> <script src="//cdn.jsdelivr.net/npm/graphiql@0.11.2/graphiql.js"></script>
4. استبدل index.html في المشروع ... \ src \ main \ webapp \ index.html بالأخرى المشطوبة للتو.
نعيد تشغيل المشروع ، نذهب إلى
localhost: 8080 ونصل إلى هذه الصفحة

المكافأة الأولى: على اليسار هو زر المستندات ، والذي يخفي الوثائق الجاهزة لمشروعك. ليس كثيرًا ، الحقول التي يمكن طلبها والطرق التي يمكن استدعاؤها وما يجب تمريره فيها.

كما أنه يوفر مجموعات السيارة المفضلة لديك.

الآن مع ذلك ، سوف نرسل طلب تغيير. لدينا طفرة واحدة ، "إضافة رابط".

نص الاستعلام: mutation createLink{ createLink(url:"http://test.com", description:"test mutation"){ url description } }
بعد ذلك بقليل اكتشفت أن كلمة الطفرة كافية (createLink بعد أن لا يكون من الضروري الكتابة)
mutation { createLink(url:"http://test.com", description:"test mutation"){ url description } }
على سبيل المثال نحن نسمي الطريقة فقط باسمها ونمرر المعلمات إليها. يمكنك أيضًا خيانة المعلومات التي نريد استعادتها.
كيف ترى طلب الطفرة1. افتح علامة تبويب المطور F12 وافتح الشبكة ، نرسل الطلب.

2. بناء على الطلب المقدم ، RMB -> copy -> copy as cURL (bash)

2.1. بالنسبة لأولئك الذين يستخدمون الضفيرة ، هذا يكفي ، لأولئك الذين يريدون رؤية ساعي البريد تذهب أبعد من ذلك
3. افتح ساعي البريد وانقر فوق استيراد أعلى اليسار.

4. في النافذة التي تفتح ، حدد لصق نص أول ولصق طلب التجعيد المنسوخ هناك

ويمكننا رؤية نص الطلب:
{"query":"mutation createLink{\n createLink(url:\"http://test.com\", description:\"test mutation\"){\n\t\turl\n description\n }\n}","variables":null,"operationName":"createLink"} “\n”.
في هذه المرحلة ، يوجد بالفعل خادم بسيط ، وهناك تخزين هناك ، وقمنا بتعيين عنوان url للطلبات.
احببت الفكرة نفسها يمكن للجبهة نفسها تحديد المعلومات التي تحتاجها حاليًا ، وكيفية حفظ حركة المرور. عند إضافة وظائف جديدة ، تستمر الوظيفة القديمة في العمل ، وتستمر الجبهة في تلقي ما تحتاجه فقط ، لا أكثر ولا أقل.
رمز عينة Github
فرعين:
سيد - كيف يتم ذلك في
البرنامج التعليمي الرسمي
تحديث_إصدار هو إصدار محدث ، مع إصدارات جديدة من التبعيات.
المراجع:
1.
أرصفة2.
البرنامج التعليمي الرسمي (للغات مختلفة)3.
الفيديو الذي أعطى الفهم الأول