Lecture Notes on Using Async Data

Key Concepts

• useAsyncData: A function that allows page components and plugins to access data that resolves asynchronously.
• Difference Between useFetch and useAsyncData:
  • useFetch:
    • Accepts a URL and retrieves data.
    • Acts as developer experience sugar for common cases.
  • useAsyncData:
    • Can implement more complex logic and transformations.

Example of useAsyncData and useFetch

• Basic Fetch Example:
  • Demonstrates fetching data from an endpoint with a counter.
  • useAsyncData is demonstrated with a key and a URL, utilizing a callback for fetching data.

Functionality Overview

• Creating a function to wait for a promise on a product count:
  • Product Count Logic:
    • Wait for 2000 milliseconds (2 seconds) to increment and return the product count.
  • API Endpoint: /api/products

Coding Demonstration

1. In index.vue:

   • Use useAsyncData with a key (e.g., products).
   • The callback function handles the fetch call, returning a promise.
   • Indicator for pending state while waiting for data.

2. Refresh Functionality:

   • A button to trigger data refresh using refreshAsyncData(), specifying the key.
   • Loading state appears on refresh, confirming server action.

Using useLazyAsyncData

• Similar to useAsyncData but does not require asynchronous actions.
• Utilized for interval functions that update every second.
• Example shows product count reflecting server runtime in seconds (e.g., 36 seconds, 42 seconds).

Key Methods for Data Fetching in Next.js

• Method Summary:
  • useFetch: Universal data fetching for both client and server.
  • Composable function combining async calls, useAsyncData, and $fetch.
• Options for customizing fetch requests include:
  • Watching elements to refresh or set additional parameters.
  • Cache Management:
    • clearAsyncData: Utility to clear cached data for fresh requests.

Common Issues and Solutions

• Passing client headers to APIs can be tricky.
• useRequestHeaders: Method to pass headers directly in useFetch.