learnreact
nextjs
javascriptAdvanced JavascriptlearnapilearnreactAdvanced ReactjsType ScriptnextjsTailwind CSS && MateriallionelnodejsNodejs AdvancedPostgresqlMongodb
nextjs
javascriptAdvanced JavascriptlearnapilearnreactAdvanced ReactjsType ScriptnextjsTailwind CSS && MateriallionelnodejsNodejs AdvancedPostgresqlMongodb
  • ❓Khi nào tôi nên sử dụng getStaticPaths?
  • [...slug] và [[...slug]] trong nextjs khác nhau gì, và chúng để làm gì hãy cho tôi ví dụ. (ok)
  • 🥰Các cách phổ biến để cập nhật tham số truy vấn mà không cần tải lại trang. (ok)
  • [Jotai] State Management with Jotai — React and TypeScript ready library — World of Atoms
  • 🥰Chuyển hướng sau khi đăng nhập thành công, redirect trong server (ok)
  • 😆loadErrorMessages, loadDevMessages @apollo/client (ok)
  • 😆Sử dụng @faker-js/faker, mock (ok)
  • 🥰Nghiên cứu công cụ này hay storybook.js.org (ok)
    • 😲Hướng dẫn sử dụng tạo trang shop Storybook với nextjs typescirpt (ok)
      • Tool Test chromatic
  • 😇quy tắc đọc Regex trong javascirpt như nào? Có phải từ trong ra ngoài từ trái qua phải? (ok)
    • 🥰Hiểu về matcher trong middleware (ok)
  • Cấu hình để build ra folder tùy chỉnh (ok)
  • 😲Dấu ngoặc vuông và tròn ví dụ [locale], (main) trong app nextjs có ý nghĩa gì (ok)
  • 😇Full Shop Study 😁
    • NextAuth đăng nhập với graphql, getClient và wodpress thư mục app sử dụng typescript (ok)
      • Toàn bộ giải thích dự án trên 😒
        • NextAuth login với graphql, getClient và wodpress thư mục app sử dụng typescript (p1)
        • NextAuth login, register với graphql, getClient và wodpress thư mục app sử dụng typescript (p2)
        • NextAuth login, register, google với graphql, getClient và wp thư mục app sử dụng typescript (p3)
        • Giúp tôi chức năng đăng nhập bằng google
    • 😆Shop, cart product[SIMPLE,VARIABLE,EXTERNAL,GROUP] login, logout (thêm, xóa, cập nhật) (ok)
      • Tổng hợp các câu hỏi đã hỏi
      • Nghiên cứu từng bước
  • 😲Hướng dẫn đăng nhập wordpress bằng JWT Authentication for WP REST API (ok)
    • 🥰Cách mở rộng interface, type trong core nextjs (ok)
    • Nghiên cứu queries trong graphql full (ok)
  • Làm chức năng đăng ký bằng google cho nextjs typescript với wordpress. đọc thêm
  • Người dùng đã có, không cần đăng nhập lại qua WordPress tôi muốn chuyển qua trang khác đọc thêm
  • Đăng ký bằng google cho nextjs typescript với wordpress đọc thêm
  • PagLàm chức năng đăng ký bằng google cho nextjs typescript với wordpress. bằng gói graphql-request
  • 😲CORS là gì (ok)
  • 🙂Create a Middleware in NextJS 13 (ok)
  • 😲Zod là gì? Hướng dẫn Validation với Zod (ok)
  • Import and export TS types and interfaces in Next.js app don't needed anymore (ok)
    • Không cần nhập và xuất các loại TS và giao diện trong ứng dụng Next.js nữa (ok)
  • 😍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)
    • Headless WordPress Authentication with Native Cookies
      • Study Product purchmarket 😒
      • Headless WordPress Authentication with Native Cookies - A Next.js 14 app (using app router) (ok)
      • Headless WordPress Email Settings (ok)
  • next.config.js Full (ok)
  • 😲Sử dụng 'use client', 'use server' khi nào? Giải thích dễ hiểu bằng ví dụ cho tôi?
  • 😲😍 Auth with clerk and NextAuth.js (ok)
    • Khai báo globalThis cho PrismaClient như nào?
    • 🙂Nghiên cứu dự án tour-trek
      • Tạo một menu để useRegisterModal và sử dụng React.FC đăng ký Generic (ok)
      • 😲Tạo sign up && xử lý click trigger hay handleClickOutside (ok)
      • 😲Tạo login && ToasterProvider (ok)
    • 🙂Study step by step NextAuth.js
      • 🥰Cách sử dụng globalThis trong nextjs typescirpt && chỉ có typescirpt (ok)
      • 😲Kiểu tiện ích ReturnType<Type> trong TypeScript là một tính năng mạnh mẽ (ok)
      • 😲Tại sao global có kiểu "typeof globalThis"
        • 😲Lấy ví dụ sử dụng globalThis (ok)
    • 😇V4 ở pages có username và github (ok)
    • 😆v4 ở app cách khác getServerSession cách rất ngắn gọn mới chỉ có github (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
  • [axios-hooks] React hooks cho axios, có hỗ trợ tích hợp cho việc kết xuất phía máy chủ 😍
    • Cho tôi một ví dụ sử dụng axios-hooks SSR xem ví dụ ở trên vì đã làm rồi (ok)
  • 😍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
  • 🥰Sử dụng Axios interceptors làm mới token với refresh token trong jwt (ok)
    • 🥰JWT (JSON Web Token) là gì? Hướng dẫn tạo JWT Auth trong NodeJS
  • 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
  • Cart
  • ADD_TO_CART_MUTATION theo kiểu fragment
  • GET_CART_QUERY
  • UPDATE_CART_ITEMS_QUANTITIES_MUTATION
  • Toàn bộ code để check trong graphql

Was this helpful?

  1. Hướng dẫn đăng nhập wordpress bằng JWT Authentication for WP REST API (ok)

Nghiên cứu queries trong graphql full (ok)

Cart

ADD_TO_CART_MUTATION theo kiểu fragment

export const ADD_TO_CART_MUTATION = gql`
  mutation AddToCart( $productId: Int! $variationId: Int $quantity: Int $extraData: String ) {
    addToCart(
      input: {
        productId: $productId
        variationId: $variationId
        quantity: $quantity
        extraData: $extraData
      }
    ) {
      cart {
        ...CartContent
      }
      cartItem {
        ...CartItemContent
      }
    }
  }
  ${CartContent}
  ${CartItemContent}
`;
export const CartContent = gql`
  fragment CartContent on Cart {
    contents(first: 100) {
      itemCount
      nodes {
        ...CartItemContent
      }
    }
    appliedCoupons {
      code
      discountAmount
      discountTax
    }
    needsShippingAddress
    availableShippingMethods {
      rates {
        id
        instanceId
        methodId
        label
        cost
      }
    }
    chosenShippingMethods
    subtotal(format: RAW)
    subtotalTax(format: RAW)
    shippingTax(format: RAW)
    shippingTotal(format: RAW)
    total(format: RAW)
    totalTax(format: RAW)
    feeTax(format: RAW)
    feeTotal(format: RAW)
    discountTax(format: RAW)
    discountTotal(format: RAW)
    fees {
      id
      name
      total
    }
    appliedCoupons {
      description
      code
      description
      discountAmount
    }
  }
  ${CartItemContent}
`;
export const CartItemContent = gql`
  fragment CartItemContent on CartItem {
    key
    product {
      node {
        ...ProductContentSlice
      }
    }
    variation {
      node {
        ...ProductVariationContentSlice
      }
    }
    quantity
    total
    subtotal
    subtotalTax
    totalOnSaleDiscount
    extraData {
      key
      value
    }
  }
  ${ProductContentSlice}
  ${ProductVariationContentSlice}
`;
export const ProductContentSlice = gql`
  fragment ProductContentSlice on Product {
    id
    databaseId
    name
    slug
    type
    image {
      id
      sourceUrl(size: WOOCOMMERCE_SINGLE)
      altText
    }
    ... on SimpleProduct {
      price
      regularPrice
      soldIndividually
    }
    ... on VariableProduct {
      price
      regularPrice
      soldIndividually
    }
  }
`;
export const ProductVariationContentSlice = gql`
  fragment ProductVariationContentSlice on ProductVariation {
    id
    databaseId
    name
    slug
    attributes {
      nodes {
        id
        label
        value
        name
      }
    }
    image {
      id
      sourceUrl(size: WOOCOMMERCE_SINGLE)
      altText
    }
    price
    regularPrice
    salePrice
    discountAmount
    discountPercentage
    stockStatus
  }
`;

test 1

mutation AddToCartT{
    addToCart(
      input: {
        productId: 1774
        variationId: 1790
        quantity: 2
        extraData: ""
      }
    ) {
      cart {
        ...CartContent
      }
      cartItem {
        ...CartItemContent
      }
    }
  }
fragment CartContent on Cart {
  contents(first: 100) {
    itemCount
    nodes {
      ...CartItemContent
    }
  }
  appliedCoupons {
    code
    discountAmount
    discountTax
  }
  needsShippingAddress
  availableShippingMethods {
    rates {
      id
      instanceId
      methodId
      label
      cost
    }
  }
  chosenShippingMethods
  subtotal(format: RAW)
  subtotalTax(format: RAW)
  shippingTax(format: RAW)
  shippingTotal(format: RAW)
  total(format: RAW)
  totalTax(format: RAW)
  feeTax(format: RAW)
  feeTotal(format: RAW)
  discountTax(format: RAW)
  discountTotal(format: RAW)
  fees {
    id
    name
    total
  }
  appliedCoupons {
    description
    code
    description
    discountAmount
  }
}
fragment CartItemContent on CartItem {
  key
  product {
    node {
      ...ProductContentSlice
    }
  }
  variation {
    node {
      ...ProductVariationContentSlice
    }
  }
  quantity
  total
  subtotal
  subtotalTax
  totalOnSaleDiscount
  extraData {
    key
    value
  }
}
 fragment ProductContentSlice on Product {
  id
  databaseId
  name
  slug
  type
  image {
    id
    sourceUrl(size: WOOCOMMERCE_SINGLE)
    altText
  }
  ... on SimpleProduct {
    price
    regularPrice
    soldIndividually
  }
  ... on VariableProduct {
    price
    regularPrice
    soldIndividually
  }
}
fragment ProductVariationContentSlice on ProductVariation {
  id
  databaseId
  name
  slug
  attributes {
    nodes {
      id
      label
      value
      name
    }
  }
  image {
    id
    sourceUrl(size: WOOCOMMERCE_SINGLE)
    altText
  }
  price
  regularPrice
  salePrice
  discountAmount
  discountPercentage
  stockStatus
}
{
  "data": {
    "addToCart": {
      "cart": {
        "contents": {
          "itemCount": 3,
          "nodes": [
            {
              "key": "e9b73bccd1762555582b513ff9d02492",
              "product": {
                "node": {
                  "id": "cHJvZHVjdDoxNzc3",
                  "databaseId": 1777,
                  "name": "Beanie",
                  "slug": "beanie",
                  "type": "SIMPLE",
                  "image": {
                    "id": "cG9zdDoxODA2",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/beanie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "18&nbsp;₫",
                  "regularPrice": "20&nbsp;₫",
                  "soldIndividually": false
                }
              },
              "variation": null,
              "quantity": 1,
              "total": "18&nbsp;₫",
              "subtotal": "18&nbsp;₫",
              "subtotalTax": "0&nbsp;₫",
              "totalOnSaleDiscount": 0,
              "extraData": []
            },
            {
              "key": "19f6eb66e580666ea01a86a19bad0822",
              "product": {
                "node": {
                  "id": "cHJvZHVjdDoxNzc0",
                  "databaseId": 1774,
                  "name": "Hoodie",
                  "slug": "hoodie",
                  "type": "VARIABLE",
                  "image": {
                    "id": "cG9zdDoxODAx",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "42&nbsp;₫ - 65&nbsp;₫",
                  "regularPrice": "50&nbsp;₫ - 65&nbsp;₫",
                  "soldIndividually": false
                }
              },
              "variation": {
                "node": {
                  "id": "cHJvZHVjdF92YXJpYXRpb246MTc5MA==",
                  "databaseId": 1790,
                  "name": "Hoodie - Red, Medium",
                  "slug": "hoodie-red-no",
                  "attributes": {
                    "nodes": [
                      {
                        "id": "MTc5MHx8cGFfY29sb3J8fHJlZA==",
                        "label": "Color",
                        "value": "Red",
                        "name": "pa_color"
                      },
                      {
                        "id": "MTc5MHx8cGFfc2l6ZXx8bWVkaXVt",
                        "label": "Size",
                        "value": "Medium",
                        "name": "pa_size"
                      }
                    ]
                  },
                  "image": {
                    "id": "cG9zdDoxODAx",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "42&nbsp;₫",
                  "regularPrice": "50&nbsp;₫",
                  "salePrice": "42&nbsp;₫",
                  "discountAmount": 8,
                  "discountPercentage": 16,
                  "stockStatus": "IN_STOCK"
                }
              },
              "quantity": 2,
              "total": "84&nbsp;₫",
              "subtotal": "84&nbsp;₫",
              "subtotalTax": "0&nbsp;₫",
              "totalOnSaleDiscount": 16,
              "extraData": []
            }
          ]
        },
        "appliedCoupons": null,
        "needsShippingAddress": true,
        "availableShippingMethods": [
          {
            "rates": [
              {
                "id": "free_shipping:1",
                "instanceId": 1,
                "methodId": "free_shipping",
                "label": "Free shipping",
                "cost": null
              }
            ]
          }
        ],
        "chosenShippingMethods": [
          "free_shipping:1"
        ],
        "subtotal": "102",
        "subtotalTax": "0",
        "shippingTax": "0",
        "shippingTotal": "0",
        "total": "102",
        "totalTax": "0",
        "feeTax": "0",
        "feeTotal": "0",
        "discountTax": "0",
        "discountTotal": "0",
        "fees": null
      },
      "cartItem": {
        "key": "19f6eb66e580666ea01a86a19bad0822",
        "product": {
          "node": {
            "id": "cHJvZHVjdDoxNzc0",
            "databaseId": 1774,
            "name": "Hoodie",
            "slug": "hoodie",
            "type": "VARIABLE",
            "image": {
              "id": "cG9zdDoxODAx",
              "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
              "altText": ""
            },
            "price": "42&nbsp;₫ - 65&nbsp;₫",
            "regularPrice": "50&nbsp;₫ - 65&nbsp;₫",
            "soldIndividually": false
          }
        },
        "variation": {
          "node": {
            "id": "cHJvZHVjdF92YXJpYXRpb246MTc5MA==",
            "databaseId": 1790,
            "name": "Hoodie - Red, Medium",
            "slug": "hoodie-red-no",
            "attributes": {
              "nodes": [
                {
                  "id": "MTc5MHx8cGFfY29sb3J8fHJlZA==",
                  "label": "Color",
                  "value": "Red",
                  "name": "pa_color"
                },
                {
                  "id": "MTc5MHx8cGFfc2l6ZXx8bWVkaXVt",
                  "label": "Size",
                  "value": "Medium",
                  "name": "pa_size"
                }
              ]
            },
            "image": {
              "id": "cG9zdDoxODAx",
              "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
              "altText": ""
            },
            "price": "42&nbsp;₫",
            "regularPrice": "50&nbsp;₫",
            "salePrice": "42&nbsp;₫",
            "discountAmount": 8,
            "discountPercentage": 16,
            "stockStatus": "IN_STOCK"
          }
        },
        "quantity": 2,
        "total": "84&nbsp;₫",
        "subtotal": "84&nbsp;₫",
        "subtotalTax": "0&nbsp;₫",
        "totalOnSaleDiscount": 16,
        "extraData": []
      }
    }
  },
  "extensions": {
    "debug": [],
    "queryLog": [
      "Query Logging has been disabled. The 'SAVEQUERIES' Constant is set to 'false' on your server."
    ],
    "queryAnalyzer": {
      "keys": "9d0b6876f8d0342e95d0f558b84c33226aa80a83858fd76eb92dc799acad41aa graphql:Mutation operation:AddToCartT cG9zdDoxODAx cG9zdDoxODA2",
      "keysLength": 128,
      "keysCount": 5,
      "skippedKeys": "",
      "skippedKeysSize": 0,
      "skippedKeysCount": 0,
      "skippedTypes": []
    }
  }
}

GET_CART_QUERY

query MyQuery {
  cart {
    contents(first: 100) {
      itemCount
      nodes {
        key
        product {
          node {
            id
            databaseId
            name
            slug
            type
            image {
              id
              sourceUrl(size: WOOCOMMERCE_SINGLE)
            }
          }
        }
      }
    }
  }
}
{
  "data": {
    "cart": {
      "contents": {
        "itemCount": 3,
        "nodes": [
          {
            "key": "e9b73bccd1762555582b513ff9d02492",
            "product": {
              "node": {
                "id": "cHJvZHVjdDoxNzc3",
                "databaseId": 1777,
                "name": "Beanie",
                "slug": "beanie",
                "type": "SIMPLE",
                "image": {
                  "id": "cG9zdDoxODA2",
                  "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/beanie-2-416x416.jpg",
                  "altText": ""
                },
                "price": "18&nbsp;₫",
                "regularPrice": "20&nbsp;₫",
                "soldIndividually": false
              }
            },
            "variation": null,
            "quantity": 1,
            "total": "18&nbsp;₫",
            "subtotal": "18&nbsp;₫",
            "subtotalTax": "0&nbsp;₫",
            "totalOnSaleDiscount": 0,
            "extraData": []
          },
          {
            "key": "19f6eb66e580666ea01a86a19bad0822",
            "product": {
              "node": {
                "id": "cHJvZHVjdDoxNzc0",
                "databaseId": 1774,
                "name": "Hoodie",
                "slug": "hoodie",
                "type": "VARIABLE",
                "image": {
                  "id": "cG9zdDoxODAx",
                  "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                  "altText": ""
                },
                "price": "42&nbsp;₫ - 65&nbsp;₫",
                "regularPrice": "50&nbsp;₫ - 65&nbsp;₫",
                "soldIndividually": false
              }
            },
            "variation": {
              "node": {
                "id": "cHJvZHVjdF92YXJpYXRpb246MTc5MA==",
                "databaseId": 1790,
                "name": "Hoodie - Red, Medium",
                "slug": "hoodie-red-no",
                "attributes": {
                  "nodes": [
                    {
                      "id": "MTc5MHx8cGFfY29sb3J8fHJlZA==",
                      "label": "Color",
                      "value": "Red",
                      "name": "pa_color"
                    },
                    {
                      "id": "MTc5MHx8cGFfc2l6ZXx8bWVkaXVt",
                      "label": "Size",
                      "value": "Medium",
                      "name": "pa_size"
                    }
                  ]
                },
                "image": {
                  "id": "cG9zdDoxODAx",
                  "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                  "altText": ""
                },
                "price": "42&nbsp;₫",
                "regularPrice": "50&nbsp;₫",
                "salePrice": "42&nbsp;₫",
                "discountAmount": 8,
                "discountPercentage": 16,
                "stockStatus": "IN_STOCK"
              }
            },
            "quantity": 2,
            "total": "84&nbsp;₫",
            "subtotal": "84&nbsp;₫",
            "subtotalTax": "0&nbsp;₫",
            "totalOnSaleDiscount": 16,
            "extraData": []
          }
        ]
      },
      "appliedCoupons": null,
      "needsShippingAddress": true,
      "availableShippingMethods": [
        {
          "rates": [
            {
              "id": "free_shipping:1",
              "instanceId": 1,
              "methodId": "free_shipping",
              "label": "Free shipping",
              "cost": null
            }
          ]
        }
      ],
      "chosenShippingMethods": [
        "free_shipping:1"
      ],
      "subtotal": "102",
      "subtotalTax": "0",
      "shippingTax": "0",
      "shippingTotal": "0",
      "total": "102",
      "totalTax": "0",
      "feeTax": "0",
      "feeTotal": "0",
      "discountTax": "0",
      "discountTotal": "0",
      "fees": null
    }
  },
  "extensions": {
    "debug": [],
    "queryLog": [
      "Query Logging has been disabled. The 'SAVEQUERIES' Constant is set to 'false' on your server."
    ],
    "queryAnalyzer": {
      "keys": "353deb1af331abf2dd83dfcfb50dffa3068627da68c111c7de37c692d0bd7574 graphql:Mutation operation:GetCart cG9zdDoxODA2 cG9zdDoxODAx",
      "keysLength": 125,
      "keysCount": 5,
      "skippedKeys": "",
      "skippedKeysSize": 0,
      "skippedKeysCount": 0,
      "skippedTypes": []
    }
  }
}

UPDATE_CART_ITEMS_QUANTITIES_MUTATION

— Vối key e9b73bccd1762555582b513ff9d02492 "variation": null

mutation UpdateCartItemQuantities {
  updateItemQuantities(
    input: {items: {key: "e9b73bccd1762555582b513ff9d02492", quantity: 10}}
  ) {
    cart {
      ...CartContent
    }
    items {
      ...CartItemContent
    }
  }
}
{
  "data": {
    "updateItemQuantities": {
      "cart": {
        "contents": {
          "itemCount": 12,
          "nodes": [
            {
              "key": "e9b73bccd1762555582b513ff9d02492",
              "product": {
                "node": {
                  "id": "cHJvZHVjdDoxNzc3",
                  "databaseId": 1777,
                  "name": "Beanie",
                  "slug": "beanie",
                  "type": "SIMPLE",
                  "image": {
                    "id": "cG9zdDoxODA2",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/beanie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "18&nbsp;₫",
                  "regularPrice": "20&nbsp;₫",
                  "soldIndividually": false
                }
              },
              "variation": null,
              "quantity": 10,
              "total": "180&nbsp;₫",
              "subtotal": "180&nbsp;₫",
              "subtotalTax": "0&nbsp;₫",
              "totalOnSaleDiscount": 0,
              "extraData": []
            },
            {
              "key": "19f6eb66e580666ea01a86a19bad0822",
              "product": {
                "node": {
                  "id": "cHJvZHVjdDoxNzc0",
                  "databaseId": 1774,
                  "name": "Hoodie",
                  "slug": "hoodie",
                  "type": "VARIABLE",
                  "image": {
                    "id": "cG9zdDoxODAx",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "42&nbsp;₫ - 65&nbsp;₫",
                  "regularPrice": "50&nbsp;₫ - 65&nbsp;₫",
                  "soldIndividually": false
                }
              },
              "variation": {
                "node": {
                  "id": "cHJvZHVjdF92YXJpYXRpb246MTc5MA==",
                  "databaseId": 1790,
                  "name": "Hoodie - Red, Medium",
                  "slug": "hoodie-red-no",
                  "attributes": {
                    "nodes": [
                      {
                        "id": "MTc5MHx8cGFfY29sb3J8fHJlZA==",
                        "label": "Color",
                        "value": "Red",
                        "name": "pa_color"
                      },
                      {
                        "id": "MTc5MHx8cGFfc2l6ZXx8bWVkaXVt",
                        "label": "Size",
                        "value": "Medium",
                        "name": "pa_size"
                      }
                    ]
                  },
                  "image": {
                    "id": "cG9zdDoxODAx",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "42&nbsp;₫",
                  "regularPrice": "50&nbsp;₫",
                  "salePrice": "42&nbsp;₫",
                  "discountAmount": 8,
                  "discountPercentage": 16,
                  "stockStatus": "IN_STOCK"
                }
              },
              "quantity": 2,
              "total": "84&nbsp;₫",
              "subtotal": "84&nbsp;₫",
              "subtotalTax": "0&nbsp;₫",
              "totalOnSaleDiscount": 16,
              "extraData": []
            }
          ]
        },
        "appliedCoupons": null,
        "needsShippingAddress": true,
        "availableShippingMethods": [
          {
            "rates": [
              {
                "id": "free_shipping:1",
                "instanceId": 1,
                "methodId": "free_shipping",
                "label": "Free shipping",
                "cost": null
              }
            ]
          }
        ],
        "chosenShippingMethods": [
          "free_shipping:1"
        ],
        "subtotal": "264",
        "subtotalTax": "0",
        "shippingTax": "0",
        "shippingTotal": "0",
        "total": "264",
        "totalTax": "0",
        "feeTax": "0",
        "feeTotal": "0",
        "discountTax": "0",
        "discountTotal": "0",
        "fees": null
      },
      "items": [
        {
          "key": "e9b73bccd1762555582b513ff9d02492",
          "product": {
            "node": {
              "id": "cHJvZHVjdDoxNzc3",
              "databaseId": 1777,
              "name": "Beanie",
              "slug": "beanie",
              "type": "SIMPLE",
              "image": {
                "id": "cG9zdDoxODA2",
                "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/beanie-2-416x416.jpg",
                "altText": ""
              },
              "price": "18&nbsp;₫",
              "regularPrice": "20&nbsp;₫",
              "soldIndividually": false
            }
          },
          "variation": null,
          "quantity": 10,
          "total": "180&nbsp;₫",
          "subtotal": "180&nbsp;₫",
          "subtotalTax": "0&nbsp;₫",
          "totalOnSaleDiscount": 0,
          "extraData": []
        }
      ]
    }
  },
  "extensions": {
    "debug": [],
    "queryLog": [
      "Query Logging has been disabled. The 'SAVEQUERIES' Constant is set to 'false' on your server."
    ],
    "queryAnalyzer": {
      "keys": "44cb04b9a242b1fc610b47a7bba94a27d6f6404158f63b281834167e8c340d7a graphql:Mutation operation:UpdateCartItemQuantities cG9zdDoxODA2 cG9zdDoxODAx",
      "keysLength": 142,
      "keysCount": 5,
      "skippedKeys": "",
      "skippedKeysSize": 0,
      "skippedKeysCount": 0,
      "skippedTypes": []
    }
  }
}

— Vối key 19f6eb66e580666ea01a86a19bad0822 "variation": !null

mutation UpdateCartItemQuantities {
  updateItemQuantities(
    input: {items: {key: "19f6eb66e580666ea01a86a19bad0822", quantity: 12}}
  ) {
    cart {
      ...CartContent
    }
    items {
      ...CartItemContent
    }
  }
}
{
  "data": {
    "updateItemQuantities": {
      "cart": {
        "contents": {
          "itemCount": 22,
          "nodes": [
            {
              "key": "e9b73bccd1762555582b513ff9d02492",
              "product": {
                "node": {
                  "id": "cHJvZHVjdDoxNzc3",
                  "databaseId": 1777,
                  "name": "Beanie",
                  "slug": "beanie",
                  "type": "SIMPLE",
                  "image": {
                    "id": "cG9zdDoxODA2",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/beanie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "18&nbsp;₫",
                  "regularPrice": "20&nbsp;₫",
                  "soldIndividually": false
                }
              },
              "variation": null,
              "quantity": 10,
              "total": "180&nbsp;₫",
              "subtotal": "180&nbsp;₫",
              "subtotalTax": "0&nbsp;₫",
              "totalOnSaleDiscount": 0,
              "extraData": []
            },
            {
              "key": "19f6eb66e580666ea01a86a19bad0822",
              "product": {
                "node": {
                  "id": "cHJvZHVjdDoxNzc0",
                  "databaseId": 1774,
                  "name": "Hoodie",
                  "slug": "hoodie",
                  "type": "VARIABLE",
                  "image": {
                    "id": "cG9zdDoxODAx",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "42&nbsp;₫ - 65&nbsp;₫",
                  "regularPrice": "50&nbsp;₫ - 65&nbsp;₫",
                  "soldIndividually": false
                }
              },
              "variation": {
                "node": {
                  "id": "cHJvZHVjdF92YXJpYXRpb246MTc5MA==",
                  "databaseId": 1790,
                  "name": "Hoodie - Red, Medium",
                  "slug": "hoodie-red-no",
                  "attributes": {
                    "nodes": [
                      {
                        "id": "MTc5MHx8cGFfY29sb3J8fHJlZA==",
                        "label": "Color",
                        "value": "Red",
                        "name": "pa_color"
                      },
                      {
                        "id": "MTc5MHx8cGFfc2l6ZXx8bWVkaXVt",
                        "label": "Size",
                        "value": "Medium",
                        "name": "pa_size"
                      }
                    ]
                  },
                  "image": {
                    "id": "cG9zdDoxODAx",
                    "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                    "altText": ""
                  },
                  "price": "42&nbsp;₫",
                  "regularPrice": "50&nbsp;₫",
                  "salePrice": "42&nbsp;₫",
                  "discountAmount": 8,
                  "discountPercentage": 16,
                  "stockStatus": "IN_STOCK"
                }
              },
              "quantity": 12,
              "total": "504&nbsp;₫",
              "subtotal": "504&nbsp;₫",
              "subtotalTax": "0&nbsp;₫",
              "totalOnSaleDiscount": 96,
              "extraData": []
            }
          ]
        },
        "appliedCoupons": null,
        "needsShippingAddress": true,
        "availableShippingMethods": [
          {
            "rates": [
              {
                "id": "free_shipping:1",
                "instanceId": 1,
                "methodId": "free_shipping",
                "label": "Free shipping",
                "cost": null
              }
            ]
          }
        ],
        "chosenShippingMethods": [
          "free_shipping:1"
        ],
        "subtotal": "684",
        "subtotalTax": "0",
        "shippingTax": "0",
        "shippingTotal": "0",
        "total": "684",
        "totalTax": "0",
        "feeTax": "0",
        "feeTotal": "0",
        "discountTax": "0",
        "discountTotal": "0",
        "fees": null
      },
      "items": [
        {
          "key": "19f6eb66e580666ea01a86a19bad0822",
          "product": {
            "node": {
              "id": "cHJvZHVjdDoxNzc0",
              "databaseId": 1774,
              "name": "Hoodie",
              "slug": "hoodie",
              "type": "VARIABLE",
              "image": {
                "id": "cG9zdDoxODAx",
                "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                "altText": ""
              },
              "price": "42&nbsp;₫ - 65&nbsp;₫",
              "regularPrice": "50&nbsp;₫ - 65&nbsp;₫",
              "soldIndividually": false
            }
          },
          "variation": {
            "node": {
              "id": "cHJvZHVjdF92YXJpYXRpb246MTc5MA==",
              "databaseId": 1790,
              "name": "Hoodie - Red, Medium",
              "slug": "hoodie-red-no",
              "attributes": {
                "nodes": [
                  {
                    "id": "MTc5MHx8cGFfY29sb3J8fHJlZA==",
                    "label": "Color",
                    "value": "Red",
                    "name": "pa_color"
                  },
                  {
                    "id": "MTc5MHx8cGFfc2l6ZXx8bWVkaXVt",
                    "label": "Size",
                    "value": "Medium",
                    "name": "pa_size"
                  }
                ]
              },
              "image": {
                "id": "cG9zdDoxODAx",
                "sourceUrl": "https://funtapgames.com/wp-content/uploads/2025/02/hoodie-2-416x416.jpg",
                "altText": ""
              },
              "price": "42&nbsp;₫",
              "regularPrice": "50&nbsp;₫",
              "salePrice": "42&nbsp;₫",
              "discountAmount": 8,
              "discountPercentage": 16,
              "stockStatus": "IN_STOCK"
            }
          },
          "quantity": 12,
          "total": "504&nbsp;₫",
          "subtotal": "504&nbsp;₫",
          "subtotalTax": "0&nbsp;₫",
          "totalOnSaleDiscount": 96,
          "extraData": []
        }
      ]
    }
  },
  "extensions": {
    "debug": [],
    "queryLog": [
      "Query Logging has been disabled. The 'SAVEQUERIES' Constant is set to 'false' on your server."
    ],
    "queryAnalyzer": {
      "keys": "a43efff8b0c05d00f38ab39cd639bdc1c1e6cabb0a34817c1cbf36717ce4bbed graphql:Mutation operation:UpdateCartItemQuantities cG9zdDoxODAx cG9zdDoxODA2",
      "keysLength": 142,
      "keysCount": 5,
      "skippedKeys": "",
      "skippedKeysSize": 0,
      "skippedKeysCount": 0,
      "skippedTypes": []
    }
  }
}

Toàn bộ code để check trong graphql

mutation AddToCartT {
  __typename
}

fragment CartContent on Cart {
  contents(first: 100) {
    itemCount
    nodes {
      ...CartItemContent
    }
  }
  appliedCoupons {
    code
    discountAmount
    discountTax
  }
  needsShippingAddress
  availableShippingMethods {
    rates {
      id
      instanceId
      methodId
      label
      cost
    }
  }
  chosenShippingMethods
  subtotal(format: RAW)
  subtotalTax(format: RAW)
  shippingTax(format: RAW)
  shippingTotal(format: RAW)
  total(format: RAW)
  totalTax(format: RAW)
  feeTax(format: RAW)
  feeTotal(format: RAW)
  discountTax(format: RAW)
  discountTotal(format: RAW)
  fees {
    id
    name
    total
  }
  appliedCoupons {
    description
    code
    description
    discountAmount
  }
}

fragment CartItemContent on CartItem {
  key
  product {
    node {
      ...ProductContentSlice
    }
  }
  variation {
    node {
      ...ProductVariationContentSlice
    }
  }
  quantity
  total
  subtotal
  subtotalTax
  totalOnSaleDiscount
  extraData {
    key
    value
  }
}

fragment ProductContentSlice on Product {
  id
  databaseId
  name
  slug
  type
  image {
    id
    sourceUrl(size: WOOCOMMERCE_SINGLE)
    altText
  }
  ... on SimpleProduct {
    price
    regularPrice
    soldIndividually
  }
  ... on VariableProduct {
    price
    regularPrice
    soldIndividually
  }
}

fragment ProductVariationContentSlice on ProductVariation {
  id
  databaseId
  name
  slug
  attributes {
    nodes {
      id
      label
      value
      name
    }
  }
  image {
    id
    sourceUrl(size: WOOCOMMERCE_SINGLE)
    altText
  }
  price
  regularPrice
  salePrice
  discountAmount
  discountPercentage
  stockStatus
}

query GetCart {
  cart {
    ...CartContent
  }
}

mutation UpdateCartItemQuantities {
  updateItemQuantities(
    input: {items: {key: "19f6eb66e580666ea01a86a19bad0822", quantity: 12}}
  ) {
    cart {
      ...CartContent
    }
    items {
      ...CartItemContent
    }
  }
}

PreviousCách mở rộng interface, type trong core nextjs (ok)NextLàm chức năng đăng ký bằng google cho nextjs typescript với wordpress. đọc thêm

Last updated 18 hours ago

Was this helpful?

😲