T
TanStack•10mo ago
flat-fuchsia

I'm here with a question, I'm an apprentice, and lately in many personal applications, I always use

I'm here with a question, I'm an apprentice, and lately in many personal applications, I always use react query, to facilitate caching and data invalidation, but lately I've been focusing on learning how to optimize applications, using server rendering, but something I noticed is that I always have to use client side, when using queries, something that in some cases may be necessary, but in others not, what do you do to improve performance in these cases? Maybe I don't understand how it works, but could someone explain it to me. thanks example of an function to fetch data 
import { useQuery } from "@tanstack/react-query";
import { client } from "@/lib/hono";

export const useGetRentProperties = () => {
  const query = useQuery({
    queryKey: ["properties"],
    queryFn: async () => {
      const response = await client.api.properties.$get();

      if (!response.ok) {
        throw new Error("Failed to fetch transactions!");
      }

      const { data } = await response.json();
      return data;
    },
  });
  return query;
};
import { useQuery } from "@tanstack/react-query";
import { client } from "@/lib/hono";

export const useGetRentProperties = () => {
  const query = useQuery({
    queryKey: ["properties"],
    queryFn: async () => {
      const response = await client.api.properties.$get();

      if (!response.ok) {
        throw new Error("Failed to fetch transactions!");
      }

      const { data } = await response.json();
      return data;
    },
  });
  return query;
};
example of using it 
"use client";
import { useGetRentProperties } from "@/features/dashboard-rent/api/use-get-rent-properties";
import { PropertyCard, PropertyCardLoading } from "./property-card";

const PropertiesGrid = () => {
  const { data, isLoading } = useGetRentProperties();
  const properties = data || [];

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-2 mb-8">
        <PropertyCardLoading />
        <PropertyCardLoading />
        <PropertyCardLoading />
        <PropertyCardLoading />
        <PropertyCardLoading />
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-2 mb-8">
      {properties.map((property) => (
        <PropertyCard data={property} key={property.id} />
      ))}
    </div>
  );
};

export default PropertiesGrid;
"use client";
import { useGetRentProperties } from "@/features/dashboard-rent/api/use-get-rent-properties";
import { PropertyCard, PropertyCardLoading } from "./property-card";

const PropertiesGrid = () => {
  const { data, isLoading } = useGetRentProperties();
  const properties = data || [];

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-2 mb-8">
        <PropertyCardLoading />
        <PropertyCardLoading />
        <PropertyCardLoading />
        <PropertyCardLoading />
        <PropertyCardLoading />
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-2 mb-8">
      {properties.map((property) => (
        <PropertyCard data={property} key={property.id} />
      ))}
    </div>
  );
};

export default PropertiesGrid;
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?