<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="https://publishpress.com/"
	>

<channel>
	<title>GrapQL Archives - Tomoshare</title>
	<atom:link href="https://blog.tomosia.com.vn/tag/grapql/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.tomosia.com.vn/tag/grapql/</link>
	<description>Kênh chia sẻ kiến thức Tomosia Việt Nam</description>
	<lastBuildDate>Fri, 03 Nov 2023 06:14:05 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://blog.tomosia.com.vn/wp-content/uploads/2023/09/cropped-icon-32x32.png</url>
	<title>GrapQL Archives - Tomoshare</title>
	<link>https://blog.tomosia.com.vn/tag/grapql/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Introduction to GraphQL</title>
		<link>https://blog.tomosia.com.vn/introduction-to-graphql/</link>
					<comments>https://blog.tomosia.com.vn/introduction-to-graphql/#comments</comments>
		
		<dc:creator><![CDATA[admin_tomosia]]></dc:creator>
		<pubDate>Fri, 03 Nov 2023 06:14:04 +0000</pubDate>
				<category><![CDATA[Chưa phân loại]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[GrapQL]]></category>
		<guid isPermaLink="false">https://blog.tomosia.com.vn/?p=1681</guid>

					<description><![CDATA[<p>Mở đầu GraphQL là ngôn ngữ trung gian kết nối giữa Client và Server. Nó không phải là&#8230;</p>
<p>The post <a href="https://blog.tomosia.com.vn/introduction-to-graphql/">Introduction to GraphQL</a> appeared first on <a href="https://blog.tomosia.com.vn">Tomoshare</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p></p>



<h2 id="mo-dau" class="wp-block-heading">Mở đầu  </h2>



<p>GraphQL là ngôn ngữ trung gian kết nối giữa Client và Server. Nó không phải là RESTful API và chỉ có 1 endpoint duy nhất. Có thể tùy biến được dữ liệu trả về cho client. Được phát triển bởi Facebook</p>



<p>Ngày nay GraphQL được sử dụng bởi nhiều công ty khác nhau như GitHub, Twitter, Shopify, Yelp&#8230;</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="419" src="http://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-1024x419.png" alt="" class="wp-image-1683" srcset="https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-1024x419.png 1024w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-300x123.png 300w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-768x314.png 768w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-380x156.png 380w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-800x328.png 800w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6-1160x475.png 1160w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/9575e73e-d831-4e91-a09d-a8ce8f765fd6.png 1407w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 id="van-de-cua-restful-api" class="wp-block-heading">Vấn đề của RESTful API</h2>



<ul class="wp-block-list">
<li>Ta có một bài toán như sau: Có một danh sách post, mỗi post có một danh sách like, trong đó like gồm name và avatar, post thì gồm title, description, &#8230; Ta đã có sẵn API post, chỉ còn thiếu danh sách like trong post</li>



<li>Giải quyết bài toán: Trong API của post, ta thêm like vào</li>



<li>Vấn đề gặp phải: Nếu màn hình phía client chỉ cần thông tin của post như vậy dữ liệu like trả về ở đây sẽ dư thừa, gây ra ảnh hưởng lớn tới performance nếu dữ liệu nhiều</li>
</ul>



<h2 id="restful-voi-graphql" class="wp-block-heading">RESTful với GraphQL</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="716" src="http://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-1024x716.png" alt="" class="wp-image-1682" srcset="https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-1024x716.png 1024w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-300x210.png 300w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-768x537.png 768w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-200x140.png 200w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-380x266.png 380w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-800x559.png 800w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest-1160x811.png 1160w, https://blog.tomosia.com.vn/wp-content/uploads/2023/11/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png 1290w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>GraphQL so với REST. Đó là một cuộc tranh luận gay gắt trong thế giới API trong một thời gian. Và thẳng thắn mà nói, chúng chỉ là hai phương pháp khác nhau để giải quyết cùng một vấn đề: truy cập dữ liệu từ các dịch vụ web.</p>



<p>Mặc dù hai công nghệ có một số điểm tương đồng, nhưng sự khác biệt nhỏ có thể khiến bạn lựa chọn công nghệ này hơn công nghệ khác.</p>



<p>REST và GraphQL là hai cách tiếp cận thiết kế API thực hiện cùng một chức năng: truyền dữ liệu qua các giao thức internet như HTTP. Tuy nhiên,GraphQL là một ngôn ngữ truy vấn, trong khi REST là một mẫu kiến trúc.</p>



<figure class="wp-block-table"><table><tbody><tr><td><strong>GraphQL</strong></td><td><strong>REST</strong></td></tr><tr><td>Một ngôn ngữ truy vấn cung cấp hiệu quả và tính linh hoạt để giải quyết các vấn đề thường gặp khi tích hợp các API</td><td>Một phong cách kiến trúc phần lớn được xem như một tiêu chuẩn thông thường để thiết kế các API</td></tr><tr><td>Được triển khai qua HTTP bằng cách sử dụng một endpoint duy nhất.</td><td>Được triển khai trên một tập hợp các URL trong đó mỗi URL cung cấp một tài nguyên duy nhất</td></tr><tr><td>Sử dụng kiến trúc hướng đến client</td><td>Sử dụng kiến trúc hướng đến server</td></tr><tr><td>Thiếu cơ chế lưu vào bộ nhớ đệm tự động</td><td>Tự động sử dụng bộ nhớ đệm</td></tr><tr><td>Không có phiên bản API</td><td>Hỗ trợ nhiều phiên bản API</td></tr><tr><td>Chỉ đại diện data kiểu JSON</td><td>Hỗ trợ nhiều định dạng dữ liệu</td></tr><tr><td>Chỉ một công cụ duy nhất được sử dụng chủ yếu cho tài liệu: GraphQL</td><td>Nhiều tùy chọn cho tài liệu tự động, chẳng hạn như OpenAPI và API Blueprint</td></tr><tr><td></td><td></td></tr></tbody></table></figure>



<h2 id="mot-so-thuoc-tinh-cua-graphql-doi-voi-client" class="wp-block-heading">Một số thuộc tính của GraphQL (đối với client)</h2>



<ol class="wp-block-list">
<li><strong>Fields:</strong>&nbsp;hiểu đơn giản là các trường ta muốn trả về</li>
</ol>



<pre class="wp-block-code"><code>{
  hero { // đây là field
    name // đây là field
  }
}</code></pre>



<p>      2. <strong>Argument:</strong>&nbsp;là đối số truyền vào</p>



<pre class="wp-block-code"><code>{
  human(id: "1000") { // id: "1000" chính là đối số truyền vào
    name
    height
  }
}</code></pre>



<p>       3. <strong>Fragments:</strong>&nbsp;khi ta có quá nhiều câu truy vấn có cùng trường trả về, thì ta tạo fragment.               Nó giống như một tệp đóng gói, ta sẽ đem tệp này sử dụng ở nhiều nơi</p>



<pre class="wp-block-code"><code>  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}</code></pre>



<p>       4. <strong>Directives:</strong>&nbsp;ta có 2 loại directives là&nbsp;<code>@include</code>&nbsp;và&nbsp;<code>@skip</code>, như tên gọi, tùy vào trường hợp mà ta sử lý thế nào cho hợp lý</p>



<pre class="wp-block-code"><code>query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friends @include(if: $withFriends) {
      name
    }
    girlFriends @skip(if: $withFriends) {
      name
    }
  }
}</code></pre>



<p>      5. <strong>Query và Mutation</strong></p>



<ul class="wp-block-list">
<li>Query: được dùng khi chúng ta muốn hiển thị gì đấy, như show list hay show detail của post</li>



<li>Mutation: được dùng khi chúng ta muốn tạo mới, chỉnh sửa hay xóa record thì mutation sẽ được sử dụng</li>



<li>Có thể dùng ngược lại vì việc defined xem, tạo, xóa, sửa sẽ do phía Back-end xử lý</li>
</ul>



<h2 id="ket-luan" class="wp-block-heading">Kết luận</h2>



<ul class="wp-block-list">
<li>Bài viết này mình đã giới thiệu chung về GraphQL, với mong muốn mọi người hiểu được GraphQL là gì, Tại sao nó lại ra đời. Mình cũng muốn nhấn mạnh là GraphQL là&nbsp;<strong>một query language cho API</strong>, nó ra đời để khắc phục những thiếu sót và nhược điểm của REST.</li>



<li>Nguồn tham khảo:&nbsp;<a rel="noreferrer noopener" href="https://www.howtographql.com/basics/0-introduction/" target="_blank">https://www.howtographql.com/basics/0-introduction/</a></li>
</ul>
<p>The post <a href="https://blog.tomosia.com.vn/introduction-to-graphql/">Introduction to GraphQL</a> appeared first on <a href="https://blog.tomosia.com.vn">Tomoshare</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.tomosia.com.vn/introduction-to-graphql/feed/</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
			</item>
	</channel>
</rss>
