T
tRPC

Disable fetch on load

Disable fetch on load

Iismi_abbas
View on Discord
6/18/2023
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.
Sszagi3891
View on Discord
6/18/2023
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;
Iismi_abbas
View on Discord
6/18/2023
Thanks a lot. That was pretty simplešŸ«”
Rrocawear
View on Discord
6/18/2023
Just add {enabled: !!input} to query
Iismi_abbas
View on Discord
6/19/2023
Ok i've added that something like that before, but not working. Maybe I put the wrong state there.

Looking for more? Join the community!

T
tRPC

Disable fetch on load

Join Server
Recommended 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 theQuery data is undefined for a bit and is then populated. How to use with React State?I have an asychronous submit function that's called upon a button press. It refetches the query witshould we use tRPC for handling form submittion or not?Hey everyone, I've started using tRPC for my API endpoints and my project is based in Svelte/SvelteK