Search

Client Query

How to fetch on client with fresh data

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

Query Pattern

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

Fresh DataFetched directly on the clientAPISingaporeBrowserSan 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 API for the data.
2BrowserReceives the fresh data and displays the data.

GET Request

The following example fetches data on the client side using a GET request. To ensure the data is always fresh, either set queryCache to false or omit it entirely.

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

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

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

POST Request

The following example fetches data on the client side using a POST request. To ensure the data is always fresh, either set queryCache to false or omit it entirely.

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

function ClientComponent() {
  const { data, error, isLoading } = clientQuery({
        queryUrl: "https://api.example.com/data",
        queryOptions: {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ foo: "bar" }),
        },
      });

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

Made with

by Bigbang