Refresh not updating data in useAsyncQuery

[chrispreisler]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.2.2
• Nitro Version: 2.2.3
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, apollo
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

Describe the bug

Hey guys,

first of all, thank you very much for this great library.

When I call the refresh function I see a network call in the dev tools, but the data variable ist not being updated. I also tried to use the watch property from asyncData from nuxt3, but this is not working at all and doesn't call any network requests.

Expected behaviour

I would expect, that when I call the refresh function and provide a new ID, that the data ist updated.

Reproduction

You can find a repproduction link here:

https://stackblitz.com/edit/nuxt-3-zzzb71?file=pages/index.vue

There is also a second page, which shows, that it is working with asyncData and a normal fetch function.

Additional context

Thank you very much for looking into the bug.

Best regards
Chris

Logs

No response

[rutgerbakker95]

I'm facing the same problem with this config setup

[rutgerbakker95]

@chrispreisler can you try if this works for you?

<script setup>
const query = gql`
query ($id: ID!) {
    collection(id: $id) {
      title
    }
  }
`;

const variables = ref({
  id: ref('gid://shopify/Collection/274542428327');
});

const { data, refresh } = await useAsyncQuery(query, variables.value);

const handleClick = () => {
  variables.value.id = 'gid://shopify/Collection/274541707431';
  refresh();
};
</script>

[chrispreisler]

@rutgerbakker95 ah damn you are so right. It was a reactive problem, because the variables object was no ref and so the variables of the query didn't get the updated id and so it doesn't update the data.

id itselft doesn't have to be a another ref. I have updated the stackblitz:

https://stackblitz.com/edit/nuxt-3-zzzb71?file=pages%2Findex.vue

Thanks so much for the help

[rutgerbakker95]

@chrispreisler Yep I also had the same problem but in the end it makes sense. You're welcome :)