feat: 2.2.0

Team-Fuho · Dec 1, 2024 · d6442f9 · d6442f9
1 parent 0ac018a
commit d6442f9
Show file tree

Hide file tree

Showing 11 changed files with 230 additions and 124 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,18 @@
+# Changelog
+
+> logs are top-recent and using `## SEMVER - DD-MM-YY`
+
+## 2.2.0 - 1-12-2024
+
+Happy December. This update changed server schema a bit, but majorly .
+Backend compatibility still back to 1.0
+
+### Changed
+
+- Changed list query schema to `PaginatedQueryField` wagtail format (single one too)
+- Changed pagination format to `page` and `perPage`
+
+### Added
+
+- Added `pagination` info to any list query
+- Added `intro` to `BlogPage` query
diff --git a/README.md b/README.md
@@ -31,14 +31,27 @@ A pretty simple `wagtail` setup for simple kind of JUST BLOGGING, and scaling un
 
 ## Client
 
-### V2
-
-Migrated to GraphQL query system
-
-> [!NOTE]
-> As to avoid redirection that cause performance issue at scale, I won't enable trail-slash redirection. The graphql endpoint would be: `http://host/api/graphql/` (notice the trailing slash)
-
-### V1
-
-> [!IMPORTANT]
-> Deprecated
+Here is the example `listBlog` query
+
+```json
+{
+  "pagination": {
+    "total": 1,
+    "count": 1,
+    "perPage": 10,
+    "currentPage": 1,
+    "prevPage": null,
+    "nextPage": null,
+    "totalPages": 1
+  },
+  "items": [
+    {
+      "id": "3",
+      "slug": "hello-world",
+      "title": "Hello World",
+      "seoTitle": "Hello World",
+      "thumb": null
+    }
+  ]
+}
+```
diff --git a/codegen.ts b/codegen.ts
@@ -8,21 +8,24 @@ const config: CodegenConfig = {
     './src/graphql/': {
       preset: 'client',
       presetConfig: {
-        persistedDocuments: true,
+        persistedDocuments: {
+          hashAlgorithm: 'sha1'
+        },
         fragmentMasking: false,
+        avoidOptional: true,
+        enumAsType: true
       },
       config: {
         documentMode: 'string',
         dedupeFragments: true,
-        constEnums: true
       }
     },
-    './src/graphql/schema.graphql': {
-      plugins: ['schema-ast'],
-      config: {
-        includeDirectives: true
-      }
-    }
+    // './src/graphql/schema.graphql': {
+    //   plugins: ['schema-ast'],
+    //   config: {
+    //     includeDirectives: true
+    //   }
+    // }
   }
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@team-fuho/wt",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "powered by `wagtail`. awesome!",
   "type": "module",
   "main": "dist/index.js",

diff --git a/src/client.gql b/src/client.gql
@@ -16,6 +16,7 @@ fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
@@ -58,53 +59,71 @@ fragment GalleryOuterView on Picture {
   imageDate
 }
 
+fragment PaginationView on PaginationType {
+  total
+  count
+  perPage
+  currentPage
+  prevPage
+  nextPage
+  totalPages
+}
+
 query GalleryListView {
-  pages(contentType: "gallery.Picture") {
-    ...GalleryOuterView
+  pictures(page: 1, perPage: 10) {
+    items {
+      ...GalleryOuterView
+    }
   }
 }
 
 query GalleryPaginatedListView(
-  $offset: PositiveInt
-  $limit: PositiveInt
+  $page: PositiveInt
+  $perPage: PositiveInt
   $order: String
 ) {
-  pages(
-    contentType: "gallery.Picture"
-    offset: $offset
-    limit: $limit
-    order: $order
-  ) {
-    ...GalleryOuterView
+  pictures(page: $page, perPage: $perPage, order: $order) {
+    items {
+      ...GalleryOuterView
+    }
   }
 }
 
 query BlogListView {
-  pages(contentType: "blog.BlogPage") {
-    ...BlogPageOuterView
+  blogs(page: 1, perPage: 10) {
+    pagination {
+      ...PaginationView
+    }
+    items {
+      ...BlogPageOuterView
+    }
   }
 }
 
-query BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {
-  pages(
-    contentType: "blog.BlogPage"
-    offset: $offset
-    limit: $limit
-    order: $order
-  ) {
-    ...BlogPageOuterView
+query BlogPaginatedListView(
+  $page: PositiveInt
+  $perPage: PositiveInt
+  $order: String
+) {
+  blogs(page: $page, perPage: $perPage, order: $order) {
+    pagination {
+      ...PaginationView
+    }
+    items {
+      ...BlogPageOuterView
+    }
   }
 }
 
 query BlogPreviewView($token: String) {
-  page(id: 0, token: $token) {
+  blog(token: $token) {
     ...BlogPageOuterView
     ...BlogPageInnerView
   }
 }
 
 query BlogLiveView($slug: String) {
-  page(slug: $slug) {
+  blog(slug: $slug) {
     ...BlogPageOuterView
     ...BlogPageInnerView
   }

diff --git a/src/graphql/gql.ts b/src/graphql/gql.ts
@@ -15,13 +15,13 @@ import * as types from './graphql';
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
-    "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"gallery.Picture\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"blog.BlogPage\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}": types.DefaultImageViewFragmentDoc,
+    "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  intro\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nfragment PaginationView on PaginationType {\n  total\n  count\n  perPage\n  currentPage\n  prevPage\n  nextPage\n  totalPages\n}\n\nquery GalleryListView {\n  pictures(page: 1, perPage: 10) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery GalleryPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  pictures(page: $page, perPage: $perPage, order: $order) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery BlogListView {\n  blogs(page: 1, perPage: 10) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  blogs(page: $page, perPage: $perPage, order: $order) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  blog(token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  blog(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}": types.DefaultImageViewFragmentDoc,
 };
 
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"gallery.Picture\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"blog.BlogPage\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}"): typeof import('./graphql').DefaultImageViewFragmentDoc;
+export function graphql(source: "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  intro\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nfragment PaginationView on PaginationType {\n  total\n  count\n  perPage\n  currentPage\n  prevPage\n  nextPage\n  totalPages\n}\n\nquery GalleryListView {\n  pictures(page: 1, perPage: 10) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery GalleryPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  pictures(page: $page, perPage: $perPage, order: $order) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery BlogListView {\n  blogs(page: 1, perPage: 10) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  blogs(page: $page, perPage: $perPage, order: $order) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  blog(token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  blog(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}"): typeof import('./graphql').DefaultImageViewFragmentDoc;
 
 
 export function graphql(source: string) {