One query provider for all layouts in Nuxt

[wobsoriano]

Hi, sharing a tip if you want to have access to the query provider in all templates with Nuxt.

You can create a plugin and use the onGlobalSetup helper and run the useNuxtQueryProvider function there.

// ~/plugins/nuxt-query-provider.ts

import { onGlobalSetup } from '@nuxtjs/composition-api';
import { useNuxtQueryProvider } from 'vue-query/ssr';

export default () => {
  onGlobalSetup(() => {
    useNuxtQueryProvider();
  });
};

[DamianOsipiuk]

@wobsoriano If you think it would be useful for others, maybe we should add it to the lib and change the example to use the plugin?

Also, did you check if this will properly separate user sessions?

[wobsoriano]

Not sure about separate sessions but I'll check. Also, do we need to export setLogger to make it work? I tried directly importing it from react-query/core and setting it to

// layout.vue
setLogger({
  log: () => {},
  warn: () => {},
  error: () => {},
});

export default defineComponent({

but I still get console logs

[DamianOsipiuk]

Hmm, it should work as it's working fine in tests. (ex. https://github.com/DamianOsipiuk/vue-query/blob/main/tests/useQuery.test.ts#L23).
So I would say it's more about where it is used? 🤔 Could you try to run it inside the setup function?

Also re-exporting it would not hurt and make better DX to import only from vue-query.