Using vue-query with vue router, generally in .ts file (tanstack) - vue.js

Question 1:
In my router.beforeEach there're some API which call many times, so I want to use useQuery to cache those API. But I caught an error that `useQuery's only used in < setup script />.
So how do we deal with this issue?
Question 2:
What is the different between queryClient and useQuery hook? Which and when we use queryClient?
Sorry, I couldn't find any good explanation in docs.
Thank you guys so much for supporting.

Related

how to get data from backend in nuxt 3 without using composition api

I hope you are fine. I want to send a get request in nuxt3 without using composition api but I don't know how to do that. I will thank anyone who give me a piece of guidance.
Thanks.
async getPosters(){
const results = await this.$axios.get('posters')
this.posters = results.data
},
Write your code as you were used too with just Options API, nothing have changed on that matter.
You can totally use Options API while using Vue3/Nuxt3. They may have some small changes but nothing too major for a simple task of querying a backend.
It looks like this is more of an issue with trying to load Axios rather than it is with the composition API. Nuxt 3 makes Axios a redundant module.
Since Fetch is the go-to considered method of requesting data in Nuxt3, have you tried changing the method of your request? It means having to load one less module for your project, and will make it a lot easier to transition between SSR and Static in the future. If not, it might be worth using the previous version of Nuxt.
Here's the documentation: https://v3.nuxtjs.org/getting-started/data-fetching in Nuxt 3.

disable graphql queries other than crud in strapi v4

I want to create a public facing API to fetch product, category etc. using strapi v4 graphql plugin.
I can disable some crud queries in the src/index.js file using the example here.
However I don't know how to disable the queries and mutations of things that are not part of shadowCRUD such as uploadFile, uploadFolder, i18Nlocale, usersPermissions, register, login etc.
How can I achieve this in strapi v4 (v4.3.4 as of right now)
extensionService.shadowCRUD('plugin::users-permissions.role').disableQueries();
extensionService.shadowCRUD('plugin::i18n.locale').disableQueries();
extensionService.shadowCRUD('plugin::upload.folder').disableQueries();
extensionService.shadowCRUD('plugin::upload.folder').disableMutations();
extensionService.shadowCRUD('plugin::upload.file').disableMutations();
extensionService.shadowCRUD('plugin::upload.file').disableQueries();
Adding these lines did help but still some of the non-content specific mutations are there (userPermissionsUser, userPermissionsRole). Still, I think there's a much cleaner way to do this somewhere.

What is the best place to add load new data to Store? ngrx/store

I am wondering what is the best place to load new data to ngrx/store during accessing the product details page in Spartacus store. I was trying to do it by adding resolver for this path, but it seems not work.
Please, advice where this type of actions should be callled.
I am not getting your question properly but I think you are looking for these links
Sample Code --> https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/core/src/user/facade/user-order.service.ts
Connecting to other systems --> https://sap.github.io/cloud-commerce-spartacus-storefront-docs/connecting-to-other-systems/

How to reuse data obtained by axios calls between VueJS components?

I am sorry if this question has already been asked, but i can't seem to find a clear explanation for my problem.
Problem: i have a web page showing a client's problem. This page need data like client ID or problem number to display it in different parts of the page (header, menu, body). This data is obtained with axios calls.
So i have multiple components which need the same data from the same axios call.
I can't understand how it is possible to make one axios call, for client ID for example, and share it with multiple components instead of making an axios call each time i need the data.
Are mixins a solution?
I have tried to use a mixin:
Vue.axiosGet({
methods: {
request: function(url) {
return axios.get(url).then(response => {
return response.data;
});
}
}
});
But now i don't know where or how to store the data i'll get.
EDIT: i forgot to precise that i don't want to use VueX.
You say that you don't want to use Vuex, but why not? I would recommend you use the Vuex store to achieve what you're looking for. A vuex store will cache/hold information in it, meaning that you can easily access it on a different page. Vuex would solve your problem and allow you make a call once, and later access the data. No need to re-invent the wheel, it's an effective way to achieve what you need.
If you really don't wanna use Vuex, there're always solutions like nedb, but I'd strongly recommend Vuex.

React Native + Redux + HMR + connect

I'm trying to get stuff working but I can't success.
Initially I get the following error :
<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically.
See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.
I followed instructions on the page, it was hard to understand that I had to put the store creation in the index.android.js and pass it as a prop, where the HMR does not rerender stuff so the store is not created again. But I finally get rid of the error.
I can now see that my store is update in the module.hot.accept function in the App/Redux/createStore function when I change any reducer, the App/Redux/SearchRedux initial state for exemple.
But my application state is not refreshed at all if I edit a reducer ! Even worst, when I do that the whole app gets disconnected from the state (but I havn't exemple on this simpler app so lets focus on the state not getting reinjected).
I can see it in App/Navigation/ReduxNavigation
You can reproduce the bug easily by cloning the repo.
I struggle on this one since this morning, time starts to be long so I finally post on SO. I've read a lot of stuff related to this issue but its obvious I'm missing something.
PS: Initially I wrote this with many links to the files so you can directly see what I mean with code. But I have few reputation despite I use the site for few years (because I always found answers, not this time)
You will find this question with the links in the repo readme, it will be easier to see files I'm talking about.
Thanks