monkawww Posts

monkawww

•Created by monkawww on 6/18/2023 in #❓-help

Disable fetch on load

import React, { useState } from "react";
import { api } from "../utils/api";

const Test = () => {
  const searchSomething = api.surau.searhSomething;
  const [input, setInput] = useState<string>("");

  const { data, isLoading } = searchSomething.useQuery({
    name: input,
  });

  return (
    <div>
      <input type="text" onChange={(e) => setInput(e.target.value)} />
      
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <div>
          {data?.map((item) => {
            return (
              <div key={item.id}>
                <div>{item.name}</div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Test;

import React, { useState } from "react";
import { api } from "../utils/api";

const Test = () => {
  const searchSomething = api.surau.searhSomething;
  const [input, setInput] = useState<string>("");

  const { data, isLoading } = searchSomething.useQuery({
    name: input,
  });

  return (
    <div>
      <input type="text" onChange={(e) => setInput(e.target.value)} />
      
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <div>
          {data?.map((item) => {
            return (
              <div key={item.id}>
                <div>{item.name}</div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Test;

I use trpc to fetch this. But how do I prevent it from fetch at first mount and remove the loading state. I just want the loading to load when i start the input typing - without using my own defined isLoading state.

6 replies