Best way to deduplicate requests of any type

nuxt4🧰modules🍍state

I have this module https://github.com/juls0730/triplit-nuxt/tree/trunk now suppose I have a composable that fetches data:

export const useFoo = async () => {
    const triplit = useTriplitClient();

    const { results: foo } = await useQuery('foo', triplit, triplit.query('foo'));

    return {
        foo,
    };
}

export const useFoo = async () => {
    const triplit = useTriplitClient();

    const { results: foo } = await useQuery('foo', triplit, triplit.query('foo'));

    return {
        foo,
    };
}

If I have two components that use

useFoo

useFoo

then there is a chance that they will both fetch the resource simultaneous, wasting bandwitdh, compute, and adding extra unwanted latency. Under the hood, in my triplit-nuxt module, I use

useState

useState

export async function useQuery<
  M extends Models<M>,
  Q extends SchemaQuery<M>,
>(
  key: string
  // ...
) {
  // ...

  const results = useState<T>(key)

  // ...
}

export async function useQuery<
  M extends Models<M>,
  Q extends SchemaQuery<M>,
>(
  key: string
  // ...
) {
  // ...

  const results = useState<T>(key)

  // ...
}

However, unless I handle the de-duplication myself, the (effectively fetch) request will fire multiple times. What I want to know is what is the correct way to de-duplicate requests like this? Should this even be a module-level thing, or is this an application layer problem?

GitHub

GitHub - juls0730/triplit-nuxt: SSR ready Triplit query composables...

SSR ready Triplit query composables for Nuxt 4. Contribute to juls0730/triplit-nuxt development by creating an account on GitHub.

Nuxt•2mo ago•

7 replies

Zoe

Best way to deduplicate requests of any type

nuxt4🧰modules🍍state

I have this module https://github.com/juls0730/triplit-nuxt/tree/trunk now suppose I have a composable that fetches data:

export const useFoo = async () => {
    const triplit = useTriplitClient();

    const { results: foo } = await useQuery('foo', triplit, triplit.query('foo'));

    return {
        foo,
    };
}

export const useFoo = async () => {
    const triplit = useTriplitClient();

    const { results: foo } = await useQuery('foo', triplit, triplit.query('foo'));

    return {
        foo,
    };
}

If I have two components that use

useFoo

useFoo

then there is a chance that they will both fetch the resource simultaneous, wasting bandwitdh, compute, and adding extra unwanted latency. Under the hood, in my triplit-nuxt module, I use

useState

useState

export async function useQuery<
  M extends Models<M>,
  Q extends SchemaQuery<M>,
>(
  key: string
  // ...
) {
  // ...

  const results = useState<T>(key)

  // ...
}

export async function useQuery<
  M extends Models<M>,
  Q extends SchemaQuery<M>,
>(
  key: string
  // ...
) {
  // ...

  const results = useState<T>(key)

  // ...
}

GitHub

GitHub - juls0730/triplit-nuxt: SSR ready Triplit query composables...

SSR ready Triplit query composables for Nuxt 4. Contribute to juls0730/triplit-nuxt development by creating an account on GitHub.

Best way to deduplicate requests of any type

Similar Threads

Best way to deduplicate requests of any type

Similar Threads

Similar Threads

Similar Threads