Search

Client Query

How to fetch on client with cached data

To fetch cached data in Client Components, use the clientQuery function.

Query Pattern

When fetching cached data in Client Components, the following sequence occurs:

Cached DataFetched from the serverAPISingaporeServerSan FranciscoBrowserSan Francisco
StepEnvironmentDescription
PreBrowserSends a request to the server for the website at https://example.com.
PreServerSends the initial HTML response to the browser.
1BrowserReceives the response, hydrates the page and sends a request to the server for the data.
2ServerFinds the cached response for the relevant API query and sends it to the browser.
3BrowserReceives the response and displays the data.
PostServerAfter the response is sent, the server checks if the data is stale. If it is, the server fetches the fresh data from the API for the next request.

GET Request

The following example fetches data on the client side using a GET request. To cache the response on the server, set queryCache to true or pass an object with custom cache options.

"use client";
import { clientQuery } from "@bigbang-sdk/next-query";

function ClientComponent() {
    const { data, error, isLoading } = clientQuery({
        queryUrl: "https://api.example.com/data",
        queryCache: true
    });

    console.log(data, error, isLoading);
}

Made with

by Bigbang