learnreact
nextjs
javascriptAdvanced JavascriptlearnapilearnreactAdvanced ReactjsType ScriptnextjsTailwind CSS && MateriallionelnodejsNodejs Advanced
nextjs
javascriptAdvanced JavascriptlearnapilearnreactAdvanced ReactjsType ScriptnextjsTailwind CSS && MateriallionelnodejsNodejs Advanced
  • ❓Khi nào tôi nên sử dụng getStaticPaths?
  • 😍CRUD redux redux-saga (ok)
    • 🫢Tìm hiểu Saga, viết class AxiosService Phần 1 (ok)
    • 😀Tìm hiểu Saga, viết class AxiosService Phần 2 (ok)
    • 🥹Sử dụng tailwind viết lại giao diện (ok)
  • 😍CMS Wordpress (ok)
  • next.config.js Full (ok)
  • 😍GitHub GraphQL API documentation
  • 🫢Fragment trong GraphQL là gì?
  • Dự án viết bằng graphql tham khảo 😒
  • 😀NextjsBlogWithGraphQL (ok)
  • 😍Tailwind Admin Dashboard Template
  • 😍I Can use both /app and /pages, template smart (ok)
  • 😀How to Query Parameters in Next.js API GET Request | Next.js 14 | REST API (ok)
  • examples nextjs full (ok)
  • 🫢Phân cấp thành phần trong thư mục Layout, template, error, loading, not-found, page (ok)
  • 😍getStaticPaths && generateStaticParams
  • === START hoanguyenit.com ===
  • 😀Building a Simple CRUD API with Next.js 13 Full (ok)
  • [ERROR] "next start" does not work with "output: export". Use "npx serve@latest out".
  • 👉Example of using the generateStaticParams() in NextJs
  • Unhandled Runtime Error Error: Invalid src prop on `next/image`, hostname
  • How to Build a CRUD App with NextJS and Prisma + PostgreSQL
  • Make a simple Shopping Cart App using NextJS 13 + Redux
  • Check Login using Middleware with NextJS 13
  • Create a Middleware in NextJS 13
  • Create a example handling data fetching with SWR in NextJS
  • === END hoanguyenit.com ===
  • 😍generateStaticParams, các hằng số dynamicParams, dynamic, revalidate (ok)
  • 😍generateStaticParams, 3 cách tạo phân đoạn động Single, Multiple, Catch-all (ok)
  • 😄How to create-next-app using version 12 instead of latest version (ok)
  • 😍Phân biệt cách sử dụng useRouter, withRouter (ok)
  • Guid Create-a-postgres-database
  • 😍Chú ý: Chúng ta đặt lại alias "contentlayer/generated": ["./.contentlayer/generated"] (ok)
  • 🫢[ERROR] "post-1.mdx" failed with YAMLParseError: Unexpected scalar at node end at line 4, column 19
  • 🫱[ERROR] export default async function Page({ params }: { params: { slug: string[] } }) { ... }
  • 👉[ERROR] Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
  • dangerouslySetInnerHTML để in nội dung trong cơ sử dữ liệu sang dạng html front-end (ok)
  • 🫢pre-rendering,ssg-ssr, dựng hình trước,Sử dụng Static Generation so với Server-side Rendering
  • 😗Chú ý ta có thể tạo folder pages bên ngoài app vẫn hoạt động bình thường (ok)
  • dateFormat.toLocaleString('en-us' cực chất ...
  • Ví dụ đơn giản dùng contentlayer, ngôn ngữ mdx xây dựng 1 blog (ok)
  • 🫢Sử dụng contentlayer, ngôn ngữ mdx xây dựng 1 blog
  • 🫢Từ khóa use server, use client là gì
  • 🫱Hướng dẫn Next.js (Full Step)
    • 🫢Next.js 13 — Features, Changes and Improvements
    • 🥹getStaticProps, getServerSideProps không được sử dụng từ next 13 trở đi
    • 😍Cache dữ liệu theo axios và fetch
    • 🫱Phân cấp thành phần trong thư mục
  • 😍Kickstarting Your Next.js Journey: A Step-by-Step Guide for Beginners
  • 😍A Complete Beginner's Guide to Next.js
  • How to run Next Js application build (out) directory?
  • [BCRYPT] Một số loại mã hóa thường dùng MD5, SHA, Bcrypt (ok)
  • [BCRYPT] Mã hoá mật khẩu với Bcrypt
  • [JSONWEBTOKEN] JSON Web Token example (ok)
  • [JSONWEBTOKEN] JWT - Từ cơ bản đến chi tiết
  • Chuyển javascript to typescript (ok)
  • Create nextjs typescript (ok)
  • [ERROR] Sửa lỗi TypeError: Cannot read property 'details' of undefined (ok)
  • [ERROR] Cách khắc phục lỗi khi ấn vào link không tự động cập nhật dữ liệu (ok)
  • ========== Start Next.js Tutorial Youtube ========
  • Next.js Tutorial - Part 1 | Router for Beginners (ok)
  • Next.js Tutorial - Part 2 | Data Fetching with getInitialProps
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 1
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 2
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 3
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 4
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 5
  • [SQLITE] Sử dụng sqlite migrations (ok)
  • Sqlite Viewer (ok)
  • Next.js Tutorial - Part 4 - API Routes using SQL Database
  • Next.js Tutorial - Part 5 - Material-ui Integration + _app and _document 1
  • Next.js Tutorial - Part 5 - Material-ui Integration + _app and _document 2 (ok)
  • Next.js Tutorial - Part 6 - Authentication for API Routes using JWT and bcrypt
  • Next.js Tutorial - Part 7 - Consume Authenticated APIs with cookies
  • Part 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths Tool sqlite table 1
  • Next.js Tutorial - Part 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths 2
  • 👎Cách phân trang khá độc lạ xem bài Part 8 bên dưới 👇
  • Next.js Tutorial - Part 8 - Static Site Generation getStaticProps and getStaticPaths currentPage 3
  • 😍😍 Resolution order, On the server, On the server with error, On the client (ok)
  • Next.js Tutorial - Part 9 - Data Fetching with getServerSideProps 1
  • Next.js Tutorial - Part 9 - Data Fetching with getServerSideProps 2
  • Next.js Tutorial - Part 10 | Environment Variables and Runtime Configuration (ok)
  • Sự liên quan giữa jwt & base64decode (ok)
  • 😗Next.js Tutorial Typescript, sqlite create, update Full (ok)
  • ========== Start Next.js Building a Car ============
  • 1. 1 Next.js Building a Car Trader App #1- Introduction and FAQ Page
  • 1.2 Next.js Building a Car Trader App #1- Introduction and FAQ Page (ok)
  • 2.0 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps
  • 2.1 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps
  • [ERROR] Warning: Prop className did not match. (not ok)
  • 2.2 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps
  • 2.3 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps (ok)
  • [SQLITE] Select by id sqlite, sqlite3 (ok)
  • [SQLITE] Select all by category sqlite, sqlite3 (ok)
  • 3.1 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.x Một ví dụ hoàn chỉnh về select Make create select Model (ok)
  • 3.2 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.3 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.4 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.5 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.6 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.7 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.8 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 4.1 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • 4.2 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • 4.3 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • Data fetching in ReactJS with useSWR (ok)
  • Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • 5.1 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.x Giao diện thực hành search (ok)
  • 5.xx Thực hành search đã nhận diện được dữ liệu (ok)
  • 5.2 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.3 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.4 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.5 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.6 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.7 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.8 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.9 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.10 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.x Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • Next.js Building a Car Trader App #6- Improved pagination with SWR + Car Cards with Material-UI
  • ========== End Next.js Building a Car ============
  • ========== End Next.js Tutorial Youtube ========
  • TypeScript Next.js example (ok)
  • next build && next export Static HTML Export (ok)
  • Cartshop xây dựng bằng nextjs, có tích hợp thanh toán phí 2%/giao dịch (ok)
  • -------------- Start Thực hiện một dự án sử dụng Dynamic import && fuse.js nextjs --------
  • 1. Thực hiện component Header.js
  • 2. Thực hiện Dynamic import (ok)
  • 3. Sử dụng fuse.js để thực hiện lọc chú ý cách sử dụng Fuse = (await import('fuse.js')).default (ok)
  • Cách sử dụng fuse.js có await và k hông có await (ok)
  • Dynamic Import (ok)
  • -------------- End Thực hiện một dự án sử dụng Dynamic import && fuse.js nextjs --------
  • ------------------ Start Thực thiện một dự án sử dụng fuse.js reactjs ------------------
  • 1. Chuẩn bị giao diện thực hành (ok)
  • 2. Thực hiện bộ lọc (ok)
  • 3. Hiển thị danh sách sau khi thực hiện bộ lọc (ok)
  • How to Add Search to a React App with Fuse.js
  • ------------------ End Thực thiện một dự án sử dụng fuse.js reactjs ------------------
Powered by GitBook
On this page

Was this helpful?

Fragment trong GraphQL là gì?

https://viblo.asia/p/graphql-fragment-3P0lP13G5ox

1. Fragment trong GraphQL là gì?

  • Trong GraphQL có một khái niệm hay được sử dụng là Fragment. Trong bài viết ngày hôm nay chúng ta hãy cùng đi tìm hiểu khái niệm này là như thế nào nhé.

  • Một GraphQL Fragment là một phần tử có thể tái sử dụng trong GraphQL Query.

  • Trong GraphQL sẽ có những lúc bạn gặp phải những tình huống mà bạn cần phải query các field giống nhau trong các câu query khác nhau. Khi mà bạn nhận thấy các câu query của bạn có nhiều các field bị lặp lại tại nhiều vị trí khác nhau. Bạn có thể tóm chúng lại thành một đơn vị có thể tái sử dụng gọi là Fragment.

  • Một GraphQL Fragment cho phép bạn khai báo một bộ các field và sử dụng chúng trong nhiều câu query. Bạn có thể liên tưởng Fragment trong GraphQL có nét tương đồng như là function trong nhiều ngôn ngữ lập trình. Bạn khai báo function ở một chỗ và bạn gọi đến function ở nhiều chỗ dùng đến nó. Chúng đều là các phần tử tái sử dụng được.

2. Các thành phần của một Fragment

  • Chúng ta hãy đi vào tìm hiểu các thành phần của một Fragment với cấu trúc mẫu bên dưới

    fragment Name on TypeName {
  field1
  field2
  field3
}

  • Một Fragment sẽ bao gồm 3 thành phần sau

    • Name: Tên riêng biệt cho 1 Fragment (mỗi một Fragment có 1 tên riêng)

    • TypeName: Kiểu của object trong GraphQL Schema mà Fragment được tạo ra từ đó, hay được lồng trong đó

    • Body: Body của Fragment định nghĩa các trường nào sẽ được query (field1, field2, field3)

3. Lợi ích của việc sử dụng GraphQL Fragment

Tại sao Fragment lại là một khái niệm rất "cool" trong GraphQL

  • Thứ nhất, bởi tính tái sử dụng của Fragment: Với Fragment, bạn có thể cấu trúc các câu query của bạn thành các phần tử có thể sử dụng được ở nhiều chỗ mà không cần phải viết lặp đi lặp lại.

  • Caching: GraphQL Client tận dụng các Fragment để cung cấp các option caching. Xem thêm apollographql.com/docs/react/caching/cache-interaction/

PreviousGitHub GraphQL API documentationNextDự án viết bằng graphql tham khảo 😒

Last updated 7 hours ago

Was this helpful?

🫢
  • 1. Fragment trong GraphQL là gì?
  • 2. Các thành phần của một Fragment
  • 3. Lợi ích của việc sử dụng GraphQL Fragment