preface

Vue + use + query = vu-query

I have been writing VUE for the past two years, and I was always troubled by data caching and repeated implementation of pagination and lazy loading of data when writing business. After changing the React stack this year, I found that there were already many such wheels in the community, such as React – Query, SWR, etc. However, after writing React for a while, I realized that writing a good react application requires a lot of verbose code, and I soon began to get tired of all the tedious work. I started to miss writing vUE code with good performance without special optimization. Last June I was thinking about getting a vue version of the React-Query wheel out, but I didn’t start until last month due to procrastination (laughs), and today I finally released version 1.0. Its core implementation comes from React-Query, which is already a particularly mature data request library, so you don’t have to worry about vU-Query availability. Don’t worry about getting started, there are plenty of written projects in the documentation as well.

Warehouse and Documentation

  • Making the warehouse
  • The document
  • The sample

introduce

Composables API for capturing, caching and updating asynchronous data in Vue 3

While most traditional state management libraries are well suited to using client state, they are not well suited to using asynchronous or server state. This is because “the server state is completely different.” For starters, server state:

  • Save remotely in a location you do not control or own
  • Asynchronous apis are required for fetching and updating
  • Represents shared ownership that can be changed by others without your knowledge
  • If you are not careful, you can cause your application to become “obsolete”

Once you understand the nature of server state in your application, there are additional challenges, such as:

  • The cache… (This is probably the hardest thing to do in programming)
  • Reprocessing multiple requests for the same data into a single request
  • Update expired data in the background
  • Know when data is “out of date”
  • Reflect updates to data as soon as possible
  • Optimize performance, such as paging and lazy loading of data
  • Manages memory and garbage collection for server state
  • The query results are shared by the structure

If you are not swamped by this list, it must mean that you have probably solved all the server state issues and should be rewarded. But if you’re like the vast majority of people, or haven’t solved all or most of these challenges yet, we’re just groping!

Vu Query is one of the best libraries for managing server state. It works great out of the box, configured to zero, and can be customized as your application grows.

With Vu Query, you can overcome the thorny challenges and obstacles of service state and control your application data before you start controlling it.

Technically, Vu Query might:

  • Helps you remove lines of complex and misunderstood code from your application and replace them with lines of Vu Query logic.
  • Make your application easier to maintain and easier to build new functionality without having to worry about connecting to new server state data sources
  • Make your applications faster and more sensitive than ever before, with a direct impact on end users.
  • Potentially helping you save bandwidth and improve memory performance

Quick start

This example very briefly illustrates the three core concepts of Vu Query:

  • The query
  • variation
  • Invalidate a query

These three concepts make up most of the core functionality of Vu Query.

import { defineComponent, createApp } from 'vue'
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from 'vu-query'
import { getTodos, postTodo } from '.. /my-api'

const Todos = defineComponent(() = > {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery('todos', getTodos)

  // Mutations
  const mutation = useMutation(postTodo, {
    onSuccess: () = > {
      // Invalidate and refetch
      queryClient.invalidateQueries('todos')}})return () = > (
    <div>
      <ul>{query.data? .map(todo => (<li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={()= > {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>)})// Create a client
const queryClient = new QueryClient()

const App = defineComponent({
  render() {
    return (
      // Provide the client to your App
      <QueryClientProvider client={queryClient}>
        <Todos />
      </QueryClientProvider>
    )
  },
})

createApp(App).mount('#app')
Copy the code

to-do

  • The document is copied and modified by the react-Query document, so there is no Chinese version, maybe it will be added later.
  • As vuE3 test tool is not available, a complete test case will be added after the test tool is released.