-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
reactive query parameters with built-in useAsyncData
#238
Comments
First thing first, just to make sure, this isn't the correct way to get your directus If you configured your const { url } = useRuntimeConfig().publlic.directus or if you would like to change the url only for that particular composable you could do this: const { readItems } = useDirectusItems({ options: { baseURL: 'https://my-different-directus-instance.com' } }) But more importantly, could you share a copy of the error you are getting in the console, or better of, the message from the |
Thank you for replying. ah. i use this to get the image vue component for my issue, there is no error in the console, i can get the data and show it to the front end without a problem, but when i try to search and use watch, its just return an empty search value. like shown below Thank you. |
oh, that is an interesting use and never realized that. Perhaps you could export the url from your const { readItems, client: { url } } = useDirectusItems() On the main topic, sorry for the distraction: I'm testing this right now, and other than noticing an error with how I implemented |
I'm going to tag the boys here: @Intevel @casualmatt This is my simple reproduction in our playground:
|
Oh, now that I think about it, this also explains a few issue I had months ago about |
in the meanwhile @alexanderivn you could create your local composable like this: import { readItems } from '@directus/sdk'
export default async function useGetAllServices () {
const { client } = useDirectusRest()
const search = ref('')
return {
url: client.url,
search,
services: await useAsyncData('services', () =>
client.request(readItems('services', {
fields: [
'title',
'slug',
'icon',
'small_description',
'content',
{ icon: ['id', 'filename_disk', 'filename_download'] },
],
search: search.value,
filter: {
status: {
_eq: 'published',
},
},
}), {
watch: [search],
lazy: true,
immediate: true,
}))
}
} |
Thank you, Sorry for the late reply, yes will try this.. Thank you so much! |
I'm going to treat this issue also as a backlog for my experimentations on this topic. I was able to reproduce the issue even in a local composable (inside the playground), more precisely without even using the SDK. This means that the issue is not related to the SDK nor how the module is built, but almost solely to how I use EDIT: and I also triple confirm that the key generation isn't the issue, since this happens with this too: async function testReadItems <
Collection extends RegularCollections<Schema>,
TQuery extends Query<Schema, CollectionType<Schema, Collection>>
> (
collection: MaybeRef<Collection>,
params?: DirectusItemsOptionsAsyncData<TQuery>
) {
return await useAsyncData(
() => Promise.resolve([{
collection,
query: params?.query,
params: params?.params
}]),
params?.params
)
} |
I might have understood what is going on. In short Vue loses the reactivity tracking for things inside non-reactive parameters like I've noticed this while fixing the reactivity for the collection names in 23f1bef, that was a workaround that I though I could use while first rewriting this module, but didn't fully understand why it was needed. If my understanding on Vue's reactivity system is correct: it is like putting an outter shell to the value you want to make reactive and it acts like a fingerprint. Once Vue starts, it keeps a record for only those fingerprints (I imagine for performance reasons), if the value changes the outter shell updates its fingerprint. Vue, on the next tick of operations, while going through the code it recognizes the reactive shell, checks its fingerprint with the one that already has and if it is different that re-elaborate all the functions that depends from that value. If my understanding is correct, we might have an hard time using UPDATEOne day I'll need to finish read the full Vue documentation, but yes, what I'm noticing is Vue working as intended... sources: 1, 2 and in general this could be helpful 3. |
useAsyncData
FYII'm delaying this till later we are in a stable |
Update: |
I'm reopening this to mainly track reactivity of query parameters for the new implementation of More info can be found in the release discussed at #215 (comment). |
Hello, i have question regarding of watch and search inside the module, im trying to implement search function and filtering function, but it seems doesnt work, the api call from search value is always empty, this is working fine if i use the nuxt-directus plugin (https://github.com/Intevel/nuxt-directus).
here is my composables.
And this is my vue component
but the search response value always empty.
Am i doing something wrong here? thank you!
The text was updated successfully, but these errors were encountered: