@wpnuxt/core 2.1.0 → 2.2.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/core",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "configKey": "wpNuxt",
   "compatibility": {
     "nuxt": ">=4.0.0"

package/dist/module.mjs

@@ -8,7 +8,7 @@ import { parse, GraphQLError, visit, print } from 'graphql';
 import { execSync } from 'node:child_process';
 import { consola } from 'consola';
 
-const version = "2.1.0";
+const version = "2.2.0";
 
 function createModuleError(module, message) {
   return new Error(formatErrorMessage(module, message));
@@ -190,6 +190,10 @@ function processSelections(selections, level, query, canExtract = true) {
   if (hasFragments && hasCustomFields) {
     query.hasInlineFields = true;
   }
+  const fieldNames = selections.filter((s) => s.kind === "Field").map((s) => s.name.value);
+  if (fieldNames.includes("pageInfo") && fieldNames.includes("nodes")) {
+    query.hasPageInfo = true;
+  }
   selections.forEach((s) => {
     if (s.kind === "FragmentSpread") {
       query.fragments?.push(s.name.value.trim());
@@ -254,6 +258,20 @@ async function prepareContext(ctx) {
   const mutationFnName = (fn) => `useMutation${upperFirst(fn)}`;
   const formatNodes = (nodes) => nodes?.map((n) => `'${n}'`).join(",") ?? "";
   const getFragmentType = (q) => {
+    if (q.hasPageInfo) {
+      if (q.hasInlineFields || !q.fragments?.length) {
+        if (q.nodes?.length) {
+          let typePath = `${q.name}RootQuery`;
+          for (const node of q.nodes) {
+            typePath = `NonNullable<${typePath}>['${node}']`;
+          }
+          typePath = `NonNullable<${typePath}>['nodes'][number]`;
+          return typePath;
+        }
+        return `${q.name}RootQuery`;
+      }
+      return q.fragments.map((f) => `WithImagePath<${f}Fragment>`).join(" | ");
+    }
     if (q.hasInlineFields || !q.fragments?.length) {
       if (q.nodes?.length) {
         let typePath = `${q.name}RootQuery`;
@@ -272,6 +290,12 @@ async function prepareContext(ctx) {
   };
   const queryFnExp = (q, typed = false) => {
     const functionName = fnName(q.name);
+    if (q.hasPageInfo) {
+      if (!typed) {
+        return `export const ${functionName} = (params, options) => useWPConnection('${q.name}', [${formatNodes(q.nodes)}], false, params, options)`;
+      }
+      return `  export const ${functionName}: (params?: MaybeRefOrGetter<${q.name}QueryVariables>, options?: WPContentOptions) => WPConnectionResult<${getFragmentType(q)}>`;
+    }
     if (!typed) {
       return `export const ${functionName} = (params, options) => useWPContent('${q.name}', [${formatNodes(q.nodes)}], false, params, options)`;
     }
@@ -287,9 +311,14 @@ async function prepareContext(ctx) {
   ctx.generateImports = () => {
     const lines = [];
     const imports = [];
-    if (queries.length > 0) {
+    const hasConnectionQueries = queries.some((q) => q.hasPageInfo);
+    const hasContentQueries = queries.some((q) => !q.hasPageInfo);
+    if (hasContentQueries) {
       imports.push("useWPContent");
     }
+    if (hasConnectionQueries) {
+      imports.push("useWPConnection");
+    }
     if (mutations.length > 0) {
       imports.push("useGraphqlMutation");
     }
@@ -367,6 +396,25 @@ async function prepareContext(ctx) {
       "  status: Ref<AsyncDataRequestStatus>",
       "}",
       "",
+      "interface WPConnectionResult<T> {",
+      "  data: ComputedRef<T[] | undefined>",
+      "  pageInfo: ComputedRef<WPPageInfo | undefined>",
+      "  loadMore: () => Promise<void>",
+      "  pending: Ref<boolean>",
+      "  refresh: () => Promise<void>",
+      "  execute: () => Promise<void>",
+      "  clear: () => void",
+      "  error: Ref<Error | undefined>",
+      "  status: Ref<AsyncDataRequestStatus>",
+      "}",
+      "",
+      "interface WPPageInfo {",
+      "  hasNextPage: boolean",
+      "  hasPreviousPage: boolean",
+      "  startCursor?: string | null",
+      "  endCursor?: string | null",
+      "}",
+      "",
       "type WPMutationResult<T> = GraphqlResponse<T>",
       "",
       "/** Adds relativePath to featuredImage.node when present (injected at runtime by transformData) */",
@@ -945,6 +993,7 @@ const module$1 = defineNuxtModule({
     configureVercelSettings(nuxt, logger);
     addImports([
       { name: "useWPContent", as: "useWPContent", from: resolver.resolve("./runtime/composables/useWPContent") },
+      { name: "useWPConnection", as: "useWPConnection", from: resolver.resolve("./runtime/composables/useWPConnection") },
       { name: "getRelativeImagePath", as: "getRelativeImagePath", from: resolver.resolve("./runtime/util/images") },
       { name: "isInternalLink", as: "isInternalLink", from: resolver.resolve("./runtime/util/links") },
       { name: "toRelativePath", as: "toRelativePath", from: resolver.resolve("./runtime/util/links") },

package/dist/runtime/composables/useWPConnection.js

@@ -0,0 +1,68 @@
+import { useWPContent } from "./useWPContent.js";
+import { computed, ref, toValue, watch as vueWatch } from "#imports";
+export const useWPConnection = (queryName, connectionPath, fixImagePaths, params, options) => {
+  const loadMoreCursor = ref(null);
+  const isLoadingMore = ref(false);
+  const accumulatedItems = ref([]);
+  const mergedParams = computed(() => {
+    const userParams = toValue(params) ?? {};
+    if (loadMoreCursor.value) {
+      return { ...userParams, after: loadMoreCursor.value };
+    }
+    return userParams;
+  });
+  const result = useWPContent(queryName, connectionPath, fixImagePaths, mergedParams, options);
+  const currentNodes = computed(() => {
+    const connection = result.data.value;
+    if (!connection || typeof connection !== "object") return void 0;
+    const nodes = connection.nodes;
+    return Array.isArray(nodes) ? nodes : void 0;
+  });
+  const pageInfo = computed(() => {
+    const connection = result.data.value;
+    if (!connection || typeof connection !== "object") return void 0;
+    return connection.pageInfo;
+  });
+  vueWatch(currentNodes, (newNodes) => {
+    if (!newNodes?.length) return;
+    if (isLoadingMore.value) {
+      accumulatedItems.value = [...accumulatedItems.value, ...newNodes];
+      isLoadingMore.value = false;
+    } else {
+      accumulatedItems.value = [...newNodes];
+      loadMoreCursor.value = null;
+    }
+  }, { immediate: true });
+  const connectionData = computed(() => {
+    return accumulatedItems.value.length > 0 ? accumulatedItems.value : currentNodes.value;
+  });
+  async function loadMore() {
+    if (!pageInfo.value?.hasNextPage || !pageInfo.value.endCursor) return;
+    isLoadingMore.value = true;
+    loadMoreCursor.value = pageInfo.value.endCursor;
+  }
+  const returnValue = {
+    data: connectionData,
+    pageInfo,
+    loadMore,
+    pending: result.pending,
+    refresh: async () => {
+      accumulatedItems.value = [];
+      loadMoreCursor.value = null;
+      isLoadingMore.value = false;
+      await result.refresh();
+    },
+    execute: result.execute,
+    clear: result.clear,
+    error: result.error,
+    status: result.status,
+    transformError: result.transformError,
+    retryCount: result.retryCount,
+    isRetrying: result.isRetrying
+  };
+  const thenable = result;
+  return Object.assign(
+    thenable.then(() => returnValue),
+    returnValue
+  );
+};

package/dist/runtime/composables/useWPContent.js

@@ -40,8 +40,12 @@ export const useWPContent = (queryName, nodes, fixImagePaths, params, options) =
     }, timeoutMs);
   }
   const getCachedDataFn = userGetCachedData ?? (clientCache === false ? noCacheGetCachedData : defaultGetCachedData);
+  const watchSources = restOptions.watch;
+  const autoWatch = isReactiveParams ? [...watchSources ?? [], resolvedParams] : watchSources;
   const asyncDataOptions = {
     ...restOptions,
+    // Watch reactive params to auto-refetch
+    ...autoWatch?.length && { watch: autoWatch },
     // Our getCachedData that properly checks static.data for SSG
     getCachedData: getCachedDataFn,
     // Enable graphql caching so the LRU cache is populated for subsequent navigations

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/core",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Nuxt module for WordPress integration via GraphQL (WPGraphQL)",
   "keywords": [
     "nuxt",