Skip to content
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

Vue Router Data Loaders #461

Open
wants to merge 25 commits into
base: master
Choose a base branch
from
Open

Vue Router Data Loaders #461

wants to merge 25 commits into from

Conversation

posva
Copy link
Member

@posva posva commented Aug 24, 2022

Summary

There is no silver bullet to data fetching because of the different data fetching strategies and how they can define the architecture of the application and its UX. However, I think it's possible to find a solution that is flexible enough to promote good practices and reduce the complexity of data fetching in applications.
That is the goal of this RFC, to standardize and improve data fetching with vue-router:

  • Automatically integrate fetching to the navigation cycle (or not by making it lazy/non-blocking)
  • Automatically rerun when used params/query params/hash changes (avoid unnecessary fetches)
  • Basic client-side caching with time-based expiration to only fetch once per navigation while using it anywhere
  • Provide control over loading/error states
  • Allow parallel or sequential data fetching (loaders that use each other)
<script lang="ts">
import { getUserById } from '../api'
import { defineLoader } from 'vue-router'

// name the loader however you want **and export it**
export const useUserData = defineLoader(async (route) => {
  const user = await getUserById(route.params.id)
  // ...
  // return anything you want to expose
  return user
})

// Optional: define other component options
export default defineComponent({
  name: 'custom-name',
  inheritAttrs: false
})
</script>

<script lang="ts" setup>
// find the user as `data` and some other properties
const { data: user, pending, error, refresh } = useUserData()
// data is always present, pending changes when going from '/users/2' to '/users/3'
</script>

Links


Important: Do NOT comment on this PR. Please use the discussion thread linked above to provide feedback, as it provides branched discussions that are easier to follow. This also makes the edit history of the PR clearer.

@posva posva added router 3.x This RFC only targets 3.0 and above labels Aug 24, 2022
@vuejs vuejs locked and limited conversation to collaborators Aug 24, 2022
@posva posva changed the title Vue Router Data Fetching Vue Router Data Loaders Sep 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x This RFC only targets 3.0 and above router
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant