monkawww•2y ago

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.

4 Replies

Grzegorz Szeliga•2y ago

In mobx it would be very easy. Since you're using hooks, make it more or less like this:

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

interface ResultPropsType {
    input: string,
}

const Results = (props: ResultPropsType) => {
    const searchSomething = api.surau.searhSomething;

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

    return (
        {isLoading ? (
            <div>Loading...</div>
        ) : (
            <div>
                {data?.map((item) => {
                    return (
                    <div key={item.id}>
                        <div>{item.name}</div>
                    </div>
                    );
                })}
            </div>
        )}
    );
};

const Test = () => {
    const [input, setInput] = useState<string>("");

    return (
        <div>
            <input type="text" onChange={(e) => setInput(e.target.value)} />
            { input.length > 0 ? <Results input={input} /> : null }
        </div>
    );
};

export default Test;

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

interface ResultPropsType {
    input: string,
}

const Results = (props: ResultPropsType) => {
    const searchSomething = api.surau.searhSomething;

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

    return (
        {isLoading ? (
            <div>Loading...</div>
        ) : (
            <div>
                {data?.map((item) => {
                    return (
                    <div key={item.id}>
                        <div>{item.name}</div>
                    </div>
                    );
                })}
            </div>
        )}
    );
};

const Test = () => {
    const [input, setInput] = useState<string>("");

    return (
        <div>
            <input type="text" onChange={(e) => setInput(e.target.value)} />
            { input.length > 0 ? <Results input={input} /> : null }
        </div>
    );
};

export default Test;

monkawwwOP•2y ago

Thanks a lot. That was pretty simple🫡

rocawear•2y ago

Just add {enabled: !!input} to query

monkawwwOP•2y ago

Ok i've added that something like that before, but not working. Maybe I put the wrong state there.