Neglected Parking Meter

    @aspida/react-query
    TypeScript icon, indicating that this package has built-in type declarations

    1.10.3 • Public • Published

    @aspida/react-query


    aspida


    React Query wrapper for aspida.


    Getting Started

    Installation

    • Using npm:

      $ npm install @aspida/react-query @aspida/axios react-query axios
      # $ npm install @aspida/react-query @aspida/fetch react-query
      # $ npm install @aspida/react-query @aspida/node-fetch react-query node-fetch
    • Using Yarn:

      $ yarn add @aspida/react-query @aspida/axios react-query axios
      # $ yarn add @aspida/react-query @aspida/fetch react-query
      # $ yarn add @aspida/react-query @aspida/node-fetch react-query node-fetch

    Make HTTP request from application

    src/index.ts

    import { useQueryClient, useMutation, QueryClient, QueryClientProvider } from 'react-query'
    import { useAspidaQuery } from "@aspida/react-query"
    import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
    import api from "../api/$api"
    
    const client = api(aspida())
    const queryClient = new QueryClient()
    
    function App() {
      return (
        // Provide the client to your App
        <QueryClientProvider client={queryClient}>
          <Todos />
        </QueryClientProvider>
      )
    }
    
    function postTodo(body: { id: number; title: string }) {
      return client.todos.$post({ body })
    }
    
    function Todos() {
      // Access the client
      const queryClient = useQueryClient()
    
      // Queries
      const query = useAspidaQuery(client.todos, { query: { limit: 10 }})
    
      // Mutations
      const mutation = useMutation(postTodo, {
        onSuccess: () => {
          // Invalidate and refetch
          queryClient.invalidateQueries(client.todos.$path({ query: { limit: 10 }}))
        },
      })
    
      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>
      )
    }
    
    render(<App />, document.getElementById('root'))

    Get response body/status/headers

    src/index.ts

    import { useMutation, QueryClient, QueryClientProvider } from 'react-query'
    import { useAspidaQuery } from "@aspida/react-query"
    import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
    import api from "../api/$api"
    
    const client = api(aspida())
    const queryClient = new QueryClient()
    
    function App() {
      return (
        <QueryClientProvider client={queryClient}>
          <Profile />
        </QueryClientProvider>
      )
    }
    
    function Profile() {
      const { data, error } = useAspidaQuery(
        client.user._userId(123),
        'get',
        { query: { name: 'mario' } }
      )
    
      if (error) return <div>failed to load</div>
      if (!data) return <div>loading...</div>
      return (
        <>
          <div>Status: {data.status}</div>
          <div>Headers: {JSON.stringify(data.headers)}</div>
          <div>Name: {data.body.name}</div>
        </>
      )
    }
    
    render(<App />, document.getElementById('root'))

    useAspidaQuery(client.user._userId(123), { query }) is an alias of useAspidaQuery(client.user._userId(123), "$get", { query })

    Use with React Query options

    src/index.ts

    import { useMutation, QueryClient, QueryClientProvider } from 'react-query'
    import { useAspidaQuery } from "@aspida/react-query"
    import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
    import api from "../api/$api"
    
    const client = api(aspida())
    const queryClient = new QueryClient()
    
    function App() {
      return (
        <QueryClientProvider client={queryClient}>
          <Profile />
        </QueryClientProvider>
      )
    }
    
    function Profile() {
      const { data, error } = useAspidaQuery(
        client.user._userId(123),
        {
          query: { name: 'mario' },
          refetchOnMount: true,
          initialData: { name: 'anonymous' }
        }
      )
    
      if (error) return <div>failed to load</div>
      return <div>hello {data.name}!</div>
    }
    
    render(<App />, document.getElementById('root'))

    License

    @aspida/react-query is licensed under a MIT License.

    Install

    npm i @aspida/react-query

    DownloadsWeekly Downloads

    263

    Version

    1.10.3

    License

    MIT

    Unpacked Size

    11 kB

    Total Files

    7

    Last publish

    Collaborators

    • m-mitsuhide
    • solufa
    • lumax