@wpnuxt/core 2.0.0 → 2.2.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/core",
-  "version": "2.0.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.0.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,10 +290,16 @@ 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)`;
     }
-    return `  export const ${functionName}: (params?: ${q.name}QueryVariables, options?: WPContentOptions) => WPContentResult<${getFragmentType(q)}>`;
+    return `  export const ${functionName}: (params?: MaybeRefOrGetter<${q.name}QueryVariables>, options?: WPContentOptions) => WPContentResult<${getFragmentType(q)}>`;
   };
   const mutationFnExp = (m, typed = false) => {
     const functionName = mutationFnName(m.name);
@@ -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");
     }
@@ -321,7 +350,7 @@ async function prepareContext(ctx) {
   ctx.generateDeclarations = () => {
     const declarations = [
       `import type { ${[...typeSet].join(", ")} } from '#build/graphql-operations'`,
-      "import type { ComputedRef, Ref } from 'vue'",
+      "import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'",
       "import type { AsyncDataRequestStatus } from '#app'",
       "import type { GraphqlResponse } from 'nuxt-graphql-middleware/types'",
       "",
@@ -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,10 +993,16 @@ 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") },
-      { name: "usePrevNextPost", as: "usePrevNextPost", from: resolver.resolve("./runtime/composables/usePrevNextPost") }
+      { name: "usePrevNextPost", as: "usePrevNextPost", from: resolver.resolve("./runtime/composables/usePrevNextPost") },
+      { name: "isPage", as: "isPage", from: resolver.resolve("./runtime/util/content-type") },
+      { name: "isPost", as: "isPost", from: resolver.resolve("./runtime/util/content-type") },
+      { name: "isContentType", as: "isContentType", from: resolver.resolve("./runtime/util/content-type") },
+      { name: "unwrapScalar", as: "unwrapScalar", from: resolver.resolve("./runtime/util/acf") },
+      { name: "unwrapConnection", as: "unwrapConnection", from: resolver.resolve("./runtime/util/acf") }
       // Note: useGraphqlMutation is auto-imported via nuxt-graphql-middleware with includeComposables: true
     ]);
     addComponentsDir({

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

@@ -1,5 +1,5 @@
 import { transformData, normalizeUriParam } from "../util/content.js";
-import { computed, ref, watch as vueWatch, useAsyncGraphqlQuery, useRuntimeConfig } from "#imports";
+import { computed, ref, toValue, watch as vueWatch, useAsyncGraphqlQuery, useRuntimeConfig } from "#imports";
 const defaultGetCachedData = (key, app, ctx) => {
   if (app.isHydrating) {
     return app.payload.data[key];
@@ -21,7 +21,8 @@ export const useWPContent = (queryName, nodes, fixImagePaths, params, options) =
     timeout: timeoutOption,
     ...restOptions
   } = options ?? {};
-  const normalizedParams = normalizeUriParam(params);
+  const isReactiveParams = typeof params === "function" || params !== null && typeof params === "object" && "__v_isRef" in params;
+  const resolvedParams = isReactiveParams ? computed(() => normalizeUriParam(toValue(params)) ?? {}) : normalizeUriParam(params) ?? {};
   const maxRetries = retryOption === false ? 0 : retryOption ?? 0;
   const baseRetryDelay = retryDelayOption ?? 1e3;
   const retryCount = ref(0);
@@ -39,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
@@ -55,7 +60,7 @@ export const useWPContent = (queryName, nodes, fixImagePaths, params, options) =
   };
   const asyncResult = useAsyncGraphqlQuery(
     String(queryName),
-    normalizedParams ?? {},
+    resolvedParams,
     asyncDataOptions
   );
   const { data, pending, refresh, execute, clear, error, status } = asyncResult;

package/dist/runtime/types/stub.d.ts

@@ -10,6 +10,7 @@ import type { NuxtApp } from 'nuxt/app'
 // Stub for #imports - Vue reactivity & lifecycle
 export function computed<T>(getter: () => T): ComputedRef<T>
 export function ref<T>(value: T): Ref<T>
+export function toValue<T>(source: Ref<T> | ComputedRef<T> | (() => T) | T): T
 export function resolveComponent(name: string): Component | string
 export function onMounted(callback: () => void): void
 export function onBeforeUnmount(callback: () => void): void
@@ -29,7 +30,7 @@ export function navigateTo(to: string): Promise<void>
 // Stub for #imports - nuxt-graphql-middleware
 export function useAsyncGraphqlQuery<T = unknown>(
   name: string,
-  params?: Record<string, unknown>,
+  params?: Record<string, unknown> | Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>,
   options?: Record<string, unknown>
 ): {
   data: Ref<T | null>

package/dist/runtime/util/acf.js

@@ -0,0 +1,9 @@
+function unwrapScalar(value) {
+  if (value == null) return void 0;
+  if (Array.isArray(value)) return value[0];
+  return value;
+}
+function unwrapConnection(connection) {
+  return connection?.nodes?.[0];
+}
+export { unwrapScalar, unwrapConnection };

package/dist/runtime/util/content-type.js

@@ -0,0 +1,10 @@
+function isPage(node) {
+  return node?.contentTypeName === "page";
+}
+function isPost(node) {
+  return node?.contentTypeName === "post";
+}
+function isContentType(node, typeName) {
+  return node?.contentTypeName === typeName;
+}
+export { isPage, isPost, isContentType };

package/package.json

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