posva / pinia-colada Goto Github PK
View Code? Open in Web Editor NEW🍹 The smart data fetching layer for Pinia
Home Page: https://pinia-colada.esm.dev/
License: MIT License
🍹 The smart data fetching layer for Pinia
Home Page: https://pinia-colada.esm.dev/
License: MIT License
This avoids cache to grow indefinitely
setup()
Add methods to mutations to handle optimistic data updates
Add a mutation plugin that allows setting up global options (onSuccess, etc that run after local ones)
Allows getting access to only the state, creates it if it doesn't exist. Requires #17
TS now supports type narrowing when destructuring. So it's worth having multiple types for the return values of useQuery and useMutation
import { Ref, ShallowRef, ref, shallowRef } from "vue";
interface UseStuffReturnOn<T> {
state: Ref<'on'>
data: ShallowRef<T>
}
interface UseStuffReturnOff<T> {
state: Ref<'off'>
data: ShallowRef<T | undefined>
}
type UseStuffReturn<T> = UseStuffReturnOff<T> | UseStuffReturnOn<T>
export function useStuff<T>(initial: T): UseStuffReturn<T> {
return {
state: ref('on'),
data: shallowRef(initial)
}
}
const { data, state } = useStuff(0)
if (state.value === 'on') {
data.value.toFixed()
}
maybe a defineQuery(() => {})
to allow using globals and creating global state associated with the query (e.g. a page?).
Currently one can try to do this:
<script setup lang="ts">
const page = ref(1)
useQuery({
query() {
return fetchData(page.value)
},
key: () => ['key', page.value]
})
<script>
But this can fail in some scenarios, notably if the same key is used in a different component or if this gets abstracted with
export const useSomeData = () => {
const page = ref(1)
return useQuery({
query() {
return fetchData(page.value)
},
key: () => ['key', page.value]
})
}
and used in multiple components, the page
will end up scoped to the first component that calls it. Both components will create a page ref but only the first one will be used within query and key. Therefore, if the first component is unmounted while the other still lives, the page ref will not be reactive anymore, breaking the usage.
It seems that the removeDep
function is not called in the context of a query declared with the defineQuery
composable. More precisely, the onScopeDispose
hook seems not to be called.
Not sure if it is relevant, but I noticed that the scopes are not the same for a query declared with the useQuery
composable and the defineQuery
composable.
In the useQuery
context:
And in the defineQuery
context:
Note: I will provide later the demo of these two cases.
This will allow later on to retrieve mutation state, cancel ongoing mutations etc. By default mutations have no key and cannot be "reused"
Create a mutation store to hold the share state of mutation
Currently, every time useQuery
is called, it registers callbacks for the visibilitychange
and online
events (if options.refetchOnWindowFocus
or options.refetchOnReconnect
are set to true
).
Could we consider the introduction of a focus manager and online manager mechanism? This approach would allow us to manage subscriptions to changes in focus and online status uniformly, rather than registering new events each time.
Allowing a query to be preloaded
Requires all the options rather than just the key as otherwise it might not exist
useMutationsState(filters: MutationFilters)
// or
useMutationState(opts: { filters: MutationFilters, select: (mutationEntry) => T })
It seems that it's often useful to select a part of the mutation entry. This also means that we first need the mutation store
So, when fetching with the apollo client all the fetched data lands in the normalized cache of apollo. Would there be any benefit in using pinia-colada or pinia in general to do the fetching other that maybe global availability, which would not be in issue since requests are cached anyway.
Allows retrieving the query state by key
data
, error
, and status
? Should each have an individual array, an object, a map?Same questions for useMutationState()
Add query handlers for loading paginated / "infinite" data
This will controll the initial fetching and also any automatic refetching like refetchOnFocus, refetchOnMount. There should be a way for this to be reachable by plugins so a refetchInterval
can be implemented but still controlled by this option.
It should allow a ref or getter too and immediately refresh if going from false to true
It could be interesting to have a way to filter queries when we look for some specific queries in the cache (a usecase could be the useQueriesState
composable, cf #23).
For example, here is the query filter provided by TanStack Query : https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.