Saya ditawari untuk berkenalan dengan GraphQL. Lihat apakah Anda dapat melamar dalam pekerjaan. Setelah mencari, saya menyadari bahwa sebagian besar informasi dalam bahasa Inggris dan sebagian lama, ada 3 versi perpustakaan, dan sudah ada 5. Saya ingin mengisi celah ini. Dalam opsi ini akan ada contoh pada servlets, mis. tanpa pegas dan tanpa pegas boot.
Bagian teoretis:
GraphQL - tampilan baru di API. Bagian 1 dari
VladimirZaetsPerbandingan Bevalorous dari REST dan GraphQLSaya akan segera menunjukkan kode kepada Anda, karena GraphQL adalah abstraksi. Dan jika Anda membahas abstraksi untuk waktu yang lama, Anda bisa tersesat. Aslinya ada di
sini .
Saya sedikit mengubah kode, karena versi yang lebih baru tidak memiliki beberapa kelas.
Buat proyek pakar kosong. Tambahkan dependensi ke piknik:
<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>
Agar tidak memikirkan server, ambil jetty:
<plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.4.6.v20170531</version> </plugin>
Perbedaan dari tutorial:
- Warisan dari SimpleGraphQLServlet dengan panggilan ke konstruktor sekarang "usang", Anda harus menggunakan pembangun, yang tidak mungkin dengan warisan, gunakan komposisi.
- Di servlet, Anda bisa membuat objek SimpleGraphQLServlet.
- GraphQLRootResolver - tidak lebih, Anda dapat menggunakan yang spesifik: GraphQLMutationResolver dan GraphQLQueryResolver
Yayasan sudah siap. Kami akan melakukan sesuai tutorial, tanpa pegas atau JAX-RS. Secara umum, servlet reguler:
@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); } }
Di dalamnya, metode layanan meneruskan data ke SimpleGraphQLServlet. Segala sesuatu pada bisnis kami berakhir.
Kode reguler (Tautan dan 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<>();
Sekarang kode permintaan (DAPATKAN permintaan di REST) dan mutasi (permintaan untuk perubahan) 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; } }
Kami mulai melalui dermaga: lari dan kami ajukan permintaan:
http://localhost:8080/graphql?query={allLinks{url}}
Kami mendapatkan jawabannya:
{"data": {"allLinks": [ {"url":"http://howtographql.com"}, {"url":"http://graphql.org/learn/"} ] } }
Dan inilah poin utama pertama: kami memiliki 2 bidang, url, dan uraian, dan kami hanya menerima url sebagai tanggapan. Dan memang benar, karena kami hanya url dan meminta {allLinks {url}} dalam permintaan. Jika Anda mengubah permintaan ke:
http://localhost:8080/graphql?query={allLinks{url,description}}
jawabannya adalah:
{"data": {"allLinks": [ { "url":"http://howtographql.com", "description":"Your favorite GraphQL page" }, { "url":"http://graphql.org/learn/", "description":"The official docks" } ] } }
Sekarang kita punya url dan deskripsi. Dan semua karena kami bertanya kepada mereka.
Permintaan untuk perubahan data.
Ini sedikit lebih rumit dan jauh lebih mudah untuk menggunakan utilitas UI.
1. Kami pergi ke
alamat2. Salin seluruh file index.html
3. Ganti 2 baris:
Ini adalah:
<link rel="stylesheet" href="./node_modules/graphiql/graphiql.css" /> <script src="./node_modules/graphiql/graphiql.js"></script>
Tentang ini:
<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. Ganti index.html dalam proyek ... \ src \ main \ webapp \ index.html dengan yang baru saja dihapus.
Kami memulai kembali proyek, pergi ke
localhost: 8080 dan sampai ke halaman seperti itu
Bonus pertama: di sebelah kiri adalah tombol Documents, yang menyembunyikan dokumentasi yang sudah jadi untuk proyek Anda. Tidak banyak, bidang yang dapat diminta dan metode yang dapat dipanggil dan apa yang harus dilewati di dalamnya.
Ini juga memberikan set mobil favorit Anda.
Sekarang dengan itu, kami akan mengirimkan permintaan mutasi. Kami memiliki satu mutasi, "tambahkan tautan".
teks permintaan: mutation createLink{ createLink(url:"http://test.com", description:"test mutation"){ url description } }
Beberapa saat kemudian saya mengetahui bahwa kata mutation sudah cukup (createLink setelah itu tidak perlu ditulis)
mutation { createLink(url:"http://test.com", description:"test mutation"){ url description } }
Yaitu kami hanya memanggil metode dengan namanya dan meneruskan parameter ke sana. Anda juga dapat mengkhianati informasi apa yang ingin kami dapatkan kembali.
Cara melihat permintaan mutasi1. Buka tab pengembang F12 dan buka jaringan, kami mengirim permintaan.
2. Atas permintaan yang diajukan, RMB -> salin -> salin sebagai cURL (bash)
2.1. Bagi mereka yang menggunakan curl, ini sudah cukup, bagi mereka yang ingin melihat tukang pos melangkah lebih jauh
3. Buka tukang pos dan klik impor di kiri atas.
4. Di jendela yang terbuka, pilih Tempel Teks Mentah dan tempelkan permintaan ikal yang disalin di sana
Dan kita bisa melihat badan permintaan:
{"query":"mutation createLink{\n createLink(url:\"http://test.com\", description:\"test mutation\"){\n\t\turl\n description\n }\n}","variables":null,"operationName":"createLink"} “\n”.
Pada tahap ini, sudah ada server sederhana, ada penyimpanan di sana, dan kami mengatur url untuk permintaan.
Saya menyukai ide itu sendiri. Front itu sendiri dapat menentukan informasi apa yang saat ini dibutuhkan, bagaimana cara menghemat lalu lintas. Saat menambahkan fungsionalitas baru, yang lama terus bekerja, bagian depan terus menerima hanya apa yang dibutuhkan, tidak lebih, tidak kurang.
Kode sampel Github
2 cabang:
master - bagaimana dilakukan dalam
tutorial resmi
update_version adalah versi yang diperbarui, dengan versi dependensi baru.
Referensi:
1.
Dermaga2.
tutorial resmi (untuk berbagai bahasa)3.
Video yang memberi pemahaman pertama