Change lang with refresh function ?

[Kamsou]

Versions

• @prismicio/vue: ^3.1.0
• "nuxt": "3.0.0-rc.9",
• node: v18.0.0

Reproduction

const navStore = useNavStore()
const langChange = computed(() => navStore.hasFrenchLangSelected)

const { data: legal, state, error, refresh } = useSinglePrismicDocument('legal')

    watch(langChange, () => {
        refresh({ lang: 'en-us' })
    })

Steps to reproduce

What is expected?

Hi Guys, I try to refresh a call with different lang, using refresh function. It is possible or not ?

What is actually happening?

It doesn't work on my side, the call is always with "fr-fr"

[github-actions[bot]]

This issue has been labeled as a bug since it was created using the 🚨 Bug Report Template.

Hi there, thank you so much for the report!

Following our Maintenance Process, we will review your bug report and get back to you next Wednesday. To ensure a smooth review of your issue and avoid unnecessary delays, please make sure your issue includes the following:

• Information about your environment and packages you use (Node.js version, package names and their versions, etc.) Feel free to attach a copy of your package.json file.
• Any troubleshooting steps you already went through
• A minimal reproduction of the issue, and/or instructions on how to reproduce it

If you have identified the cause of the bug described in your report and know how to fix it, you're more than welcome to open a pull request addressing it. Check out our quick start guide for a simple contribution process.

If you think your issue is a question (not a bug) and would like quicker support, please close this issue and forward it to an appropriate section on our community forum: https://community.prismic.io

- The Prismic Open-Source Team

[lihbr]

Hey @Kamsou, I'm sorry for the delay it took to get back to you.

The refresh function of Prismic Vue composables isn't meant to take arguments. It simply reruns the composable's network call again, potentially receiving new data (should they have been updated in the meantime).

You can have the composable react to the current app language by using the reactive value as part of its arguments (which are inherited from Prismic client's arguments). Something like this should get you going:

const navStore = useNavStore();
const langChange = computed(() => navStore.hasFrenchLangSelected);

// We create a computed value on the fly to define the arguments used by Prismic client,
// the composable will watch it and react to it
const { data: legal, state, error } = useSinglePrismicDocument('legal', computed(() => ({ lang: langChange.value })));

---

Alternatively, I see you're using Nuxt, in such case if your routing is different for the example legal page (e.g. /fr/legal & /en/legal) I'd recommend leveraging Nuxt's useAsyncData instead along with usePrismic. See an example here: https://v3.prismic.nuxtjs.org/guides/basics/fetching-content

Let me know if anything! I'll close this issue in a few days if everything looks good~

[Kamsou]

Hey @lihbr

Thx so much for your response and details. It solves my problem, I close this issue 🙏 🙇‍♀️