feat: Add useFetch()

Author: ntucker

packages/vue/README.md

@@ -28,10 +28,6 @@ Schema driven. Zero updater functions.
 
 </div>
 
-## Status
-
-🚧 **Under Development** - This package is currently being developed and is not yet ready for production use.
-
 ## Installation
 
 ```bash

packages/vue/src/__tests__/useFetch.web.ts

@@ -0,0 +1,200 @@
+import { mount } from '@vue/test-utils';
+import nock from 'nock';
+import { defineComponent, h, nextTick } from 'vue';
+
+// Reuse the same endpoints/fixtures used by the React tests
+import {
+  CoolerArticleResource,
+  StaticArticleResource,
+} from '../../../../__tests__/new';
+// Minimal shared fixture (copied from React test fixtures)
+const payload = {
+  id: 5,
+  title: 'hi ho',
+  content: 'whatever',
+  tags: ['a', 'best', 'react'],
+};
+import useFetch from '../consumers/useFetch';
+import { provideDataClient } from '../providers/provideDataClient';
+
+async function flush() {
+  await Promise.resolve();
+  await nextTick();
+  await new Promise(resolve => setTimeout(resolve, 0));
+}
+
+async function flushUntil(wrapper: any, predicate: () => boolean, tries = 100) {
+  for (let i = 0; i < tries; i++) {
+    if (predicate()) return;
+    await flush();
+  }
+}
+
+describe('vue useFetch()', () => {
+  let mynock: nock.Scope;
+  beforeAll(() => {
+    nock(/.*/)
+      .persist()
+      .defaultReplyHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Access-Token',
+        'Content-Type': 'application/json',
+      })
+      .options(/.*/)
+      .reply(200);
+  });
+  beforeEach(() => {
+    mynock = nock(/.*/).defaultReplyHeaders({
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': 'Access-Token',
+      'Content-Type': 'application/json',
+    });
+  });
+
+  afterEach(() => {
+    nock.cleanAll();
+  });
+
+  const ProvideWrapper = defineComponent({
+    name: 'ProvideWrapper',
+    setup(_props, { slots, expose }) {
+      const { controller } = provideDataClient();
+      expose({ controller });
+      return () => (slots.default ? slots.default() : h('div'));
+    },
+  });
+
+  it('should dispatch singles', async () => {
+    const fetchMock = jest.fn(() => payload);
+    mynock.get(`/article-cooler/${payload.id}`).reply(200, fetchMock);
+
+    const Comp = defineComponent({
+      name: 'FetchTester',
+      setup() {
+        const p = useFetch(CoolerArticleResource.get, { id: payload.id });
+        return () => h('div', { class: 'root' }, String(!!p));
+      },
+    });
+
+    const wrapper = mount(ProvideWrapper, {
+      slots: { default: () => h(Comp) },
+    });
+
+    // Wait for the fetch to happen
+    await flushUntil(wrapper, () => fetchMock.mock.calls.length > 0);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not dispatch with null params, then dispatch after set', async () => {
+    const fetchMock = jest.fn(() => payload);
+    mynock.get(`/article-cooler/${payload.id}`).reply(200, fetchMock);
+
+    let params: any = null;
+    const Comp = defineComponent({
+      name: 'FetchTesterNull',
+      setup() {
+        // reactive params via closure re-render with slot remount
+        useFetch(CoolerArticleResource.get as any, params);
+        return () => h('div');
+      },
+    });
+
+    const wrapper = mount(ProvideWrapper, {
+      slots: { default: () => h(Comp) },
+    });
+    await flush();
+    expect(fetchMock).toHaveBeenCalledTimes(0);
+
+    // change params and remount child to re-run setup
+    params = { id: payload.id };
+    wrapper.unmount();
+    const wrapper2 = mount(ProvideWrapper, {
+      slots: { default: () => h(Comp) },
+    });
+    await flushUntil(wrapper2, () => fetchMock.mock.calls.length > 0);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should respect expiry and not refetch when fresh', async () => {
+    const fetchMock = jest.fn(() => payload);
+    mynock.get(`/article-cooler/${payload.id}`).reply(200, fetchMock);
+
+    const Child = defineComponent({
+      name: 'FetchChild',
+      setup() {
+        useFetch(CoolerArticleResource.get, { id: payload.id });
+        return () => h('div');
+      },
+    });
+
+    const Parent = defineComponent({
+      name: 'Parent',
+      setup(_props, { expose }) {
+        const { controller } = provideDataClient();
+        let idx = 0;
+        const remount = () => {
+          idx++;
+        };
+        expose({ controller, remount });
+        return () => h('div', [h(Child, { key: idx })]);
+      },
+    });
+
+    const wrapper = mount(Parent);
+    await flushUntil(wrapper, () => fetchMock.mock.calls.length > 0);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Remount child inside same provider should not refetch while data is fresh
+    (wrapper.vm as any).remount();
+    await flush();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should dispatch with resource and endpoint expiry overrides', async () => {
+    const mock1 = jest.fn(() => payload);
+    const mock2 = jest.fn(() => payload);
+    const mock3 = jest.fn(() => payload);
+
+    mynock
+      .get(`/article-static/${payload.id}`)
+      .reply(200, mock1)
+      .get(`/article-static/${payload.id}`)
+      .reply(200, mock2)
+      .get(`/article-static/${payload.id}`)
+      .reply(200, mock3);
+
+    const Comp1 = defineComponent({
+      name: 'FetchStaticGet',
+      setup() {
+        useFetch(StaticArticleResource.get, { id: payload.id });
+        return () => h('div');
+      },
+    });
+    const Comp2 = defineComponent({
+      name: 'FetchStaticLong',
+      setup() {
+        useFetch(StaticArticleResource.longLiving, { id: payload.id });
+        return () => h('div');
+      },
+    });
+    const Comp3 = defineComponent({
+      name: 'FetchStaticNeverRetry',
+      setup() {
+        useFetch(StaticArticleResource.neverRetryOnError, { id: payload.id });
+        return () => h('div');
+      },
+    });
+
+    const w1 = mount(ProvideWrapper, { slots: { default: () => h(Comp1) } });
+    await flushUntil(w1, () => mock1.mock.calls.length > 0);
+    expect(mock1).toHaveBeenCalled();
+
+    const w2 = mount(ProvideWrapper, { slots: { default: () => h(Comp2) } });
+    await flushUntil(w2, () => mock2.mock.calls.length > 0);
+    expect(mock2).toHaveBeenCalled();
+
+    const w3 = mount(ProvideWrapper, { slots: { default: () => h(Comp3) } });
+    await flushUntil(w3, () => mock3.mock.calls.length > 0);
+    expect(mock3).toHaveBeenCalled();
+  });
+});

packages/vue/src/consumers/index.ts

@@ -4,4 +4,5 @@ export { default as useQuery } from './useQuery.js';
 export { default as useLive } from './useLive.js';
 export { default as useLoading } from './useLoading.js';
 export { default as useDebounce } from './useDebounce.js';
+export { default as useFetch } from './useFetch.js';
 export { useController as useController } from '../context.js';

packages/vue/src/consumers/useFetch.ts

@@ -0,0 +1,80 @@
+import { ExpiryStatus } from '@data-client/core';
+import type {
+  EndpointInterface,
+  Denormalize,
+  Schema,
+  FetchFunction,
+  DenormalizeNullable,
+} from '@data-client/core';
+import { computed, watch } from 'vue';
+
+import { useController, injectState } from '../context.js';
+
+/**
+ * Fetch an Endpoint if it is not in cache or stale.
+ * Non-suspense; returns the fetch Promise when a request is issued, otherwise undefined.
+ * Mirrors React useFetch semantics.
+ * @see https://dataclient.io/docs/api/useFetch
+ */
+export default function useFetch<
+  E extends EndpointInterface<
+    FetchFunction,
+    Schema | undefined,
+    undefined | false
+  >,
+>(
+  endpoint: E,
+  ...args: readonly [...Parameters<E>]
+): E['schema'] extends undefined | null ? ReturnType<E>
+: Promise<Denormalize<E['schema']>>;
+
+export default function useFetch<
+  E extends EndpointInterface<
+    FetchFunction,
+    Schema | undefined,
+    undefined | false
+  >,
+>(
+  endpoint: E,
+  ...args: readonly [...Parameters<E>] | readonly [null]
+): E['schema'] extends undefined | null ? ReturnType<E> | undefined
+: Promise<DenormalizeNullable<E['schema']>> | undefined;
+
+export default function useFetch(endpoint: any, ...args: any[]): any {
+  const stateRef = injectState();
+  const controller = useController();
+
+  const key: string = args[0] !== null ? endpoint.key(...args) : '';
+
+  // Compute response meta reactively so we can respond to store updates
+  const responseMeta = computed(() =>
+    key ? controller.getResponseMeta(endpoint, ...args, stateRef.value) : null,
+  );
+
+  let lastPromise: Promise<any> | undefined = undefined;
+
+  const maybeFetch = () => {
+    if (!key) return;
+    const meta = responseMeta.value;
+    if (!meta) return;
+    const forceFetch = meta.expiryStatus === ExpiryStatus.Invalid;
+    if (Date.now() <= meta.expiresAt && !forceFetch) return;
+    lastPromise = controller.fetch(endpoint, ...(args as any));
+  };
+
+  // Trigger on initial call
+  maybeFetch();
+
+  // Also watch for store changes that might require refetch (e.g., invalidation)
+  watch(
+    () => {
+      const m = responseMeta.value;
+      return m ? [m.expiresAt, m.expiryStatus, stateRef.value.lastReset] : key;
+    },
+    () => {
+      maybeFetch();
+    },
+  );
+
+  return lastPromise;
+}

packages/vue/src/index.ts

@@ -1,6 +1,3 @@
-// Vue Data Client - Coming Soon
-// This package will provide Vue 3 composables for @data-client/core
-
 export { Controller, ExpiryStatus, actionTypes } from '@data-client/core';
 export type {
   EndpointExtraOptions,