The refresh() is not working properly

[AQian0]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.16.1
• Nuxt Version: 3.7.0
• CLI Version: 3.8.3
• Nitro Version: 2.6.2
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, imports, pinia, css, apiParty, unocss
• Runtime Modules: @nuxtjs/[email protected], @unocss/[email protected], @element-plus/[email protected], [email protected], @vueuse/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], [email protected]
• Build Modules: -

---

Reproduction

https://codesandbox.io/p/sandbox/happy-rubin-r396mz

Describe the bug

When I use refresh(), the data doesn't get updated, and even the network request doesn't happen. So I used Nuxt3's native useFetch(), which can send network requests even though it doesn't fetch the data properly (because no proxy is configured).

Is this nuxt-api-party's fault? Or does it need to be written differently to achieve this effect?

I'm sorry if this problem bothers you.

Additional context

No response

Logs

No response

[johannschopplich]

The useMyApiData composable caches the responses just like earlier versions of useFetch did by hashing the input parameters.

Please read the Caching Guide to get an understanding when useMyApiData caches data and how to use the cache: false option.

[mattmess1221]

In case you want more control over caching, I made a composable for one of my endpoints that makes refresh invalidate the cache. It replicates some internal logic to calculate the key, so it might break in the future if nuxt-api-party or ohash updates.

For v0.20.0

export const useCurrentUser = () => {
  const nuxt = useNuxtApp();

  const dataKey = "dataKey"

  const data = useAuthData("api/v1/user/@me", {
    key: dataKey
  });

  // make refresh ignore the cache

  const { refresh } = data;

  const refreshInvalidate: typeof refresh = async (opts) => {
    // invalidate the cache
    delete nuxt.payload.data[`$apiParty${dataKey}`];
    await refresh(opts);
  };

  data.refresh = refreshInvalidate;
  // awaiting gets the original asyncdata object, which is separate from the Promise
  data.then((asyncData) => {
    asyncData.refresh = refreshInvalidate;
  });

  return data;
};

Pre v0.18.0

import { hash } from "ohash";

export const useCurrentUser = () => {
  const nuxt = useNuxtApp();
  const data = useAuthData("api/v1/user/@me");

  // make refresh ignore the cache

  // internal key, could break with a library update
  const userKey = `$party${hash([
    "auth", // endpointId
    "api/v1/user/@me", // path
    undefined, // query
    undefined, // method
    undefined, // body (except formdata)
  ])}`;

  const { refresh } = data;

  const refreshInvalidate: typeof refresh = async (opts) => {
    // invalidate the cache
    delete nuxt.payload.data[userKey];
    await refresh(opts);
  };

  data.refresh = refreshInvalidate;
  // awaiting gets the original asyncdata object, which is separate from the Promise
  data.then((asyncData) => {
    asyncData.refresh = refreshInvalidate;
  });

  return data;
};

[johannschopplich]

@killjoy1221 Thanks for your example! It also brought an idea to mind. See #51. What do you say?