monkawww
monkawww13mo 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
Grzegorz Szeliga13mo 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;
monkawww
monkawww13mo ago
Thanks a lot. That was pretty simple🫡
rocawear
rocawear13mo ago
Just add {enabled: !!input} to query
monkawww
monkawww13mo ago
Ok i've added that something like that before, but not working. Maybe I put the wrong state there.
More Posts
is it possible to record the requests on the server side ?I wanted to play them back then on the browser side . I wanted to do server side rendering in reactStreaming responses (eg. for streaming ai chat completion text)Hello! Has anyone used Vercel's `ai` package or any similar libraries which stream their responses wHandling errors on the front-endI'm making a mutation from my front-end and I intentionally throw a new TRPCError on my backend, I cTypeScript Alias Imports don't get resolved ont the ClientI have a Monorepo with a multiple `/packages/*` packages, each has its own `tsconfig.json`. I noticmerging other routers to appRouterHey everyone, I am using the https://icflorescu.github.io/trpc-sveltekit package in my SvelteKit proCan I get non-redacted INTERNAL_SERVER_ERRORS in production?I'm trying to debug crashes in production, and having a hard time. As far as I can tell, errors are Error handling: Zod errors and manually thrown TRPCErrors have different shapeIf zod validation fails, the client-side `error.message` contains a JSON encoded array of errors, buprefetch() within getServerSideProps does not provide data upon manual refreshingWithin getServerSideProps: `await ssh.user.getDepositInfo.prefetch(userId);` `await ssh.user.getFQOHow to modify existing cache data?I have a message queue being fetched with InfiniteQuery requests. When adding a new message, I want When using createServerSideHelpers can the context be typed as GetServerSidePropsContext?I assume the reason we should recreate the context when using createServerSideHelpers is because the