如何在NextJS中使用tRPC进行API请求而不出现无效的钩子调用错误

huangapple go评论68阅读模式
英文:

How to make an API request with tRPC and NextJS without an invalid hook call error

问题

以下是代码部分的翻译:

my zip code component

'use client';

import { type NextPage } from "next"
import { NextPageButtonLink } from "../UI/NextPageButtonLink"
import { api } from "../utils/api"
import { useState } from "react"


const ZipCode: NextPage = () => {
  const [zip code, setZipCode] = useState("");
  // This posts on every rerender and input. Ideally, it should only post when the user clicks submit
  // const postZipCodeResult = API.zipcode.postZipCode.use query({userId: "1", zipcode: zipcode});
  const handleSubmit = () => {
    // This throws the invalid hook location error
    const postZipCodeResult = API.zipcode.postZipCode.use query({userId: "1", zipcode: zipcode});

    console.log("Posting result", postZipCodeResult)
  }
  return (
    <div className="bg-[#3276AE] flex flex-col items-center h-screen">
       <form onSubmit={handleSubmit}>
        <label htmlFor="zipcode">Enter your zipcode:
        <input type="text" id="zipcode" name="zipcode" required value={zipcode} onChange={e => setZipCode(e.target.value)} />
        </label>
        <button type="submit">Submit</button>
      </form>
        <NextPageButtonLink pageName="survey" msg="Click here to start the demographics survey." />
    </div>
  )
}

export default ZipCode;

My zip code page:

import dynamic from "next/dynamic";

const ZipCode = dynamic(() => import('components/zipcode'), {
  SSR: false
})

export default function ZipCodePage() {
  return (<ZipCode/>)
}

my zip code router

import { z } from "zod";

import { createTRPCRouter, publicProcedure } from "../trpc";

export const zipcodeRouter = createTRPCRouter({
  postZipCode: publicProcedure
    .input(z.object({ userId: z.string(), zipcode: z.string() }))
    .query(({ input }) => {

      return {
        zipcode: `User: ${input.userId} zipcode: ${input.zipcode}`,
      };
    }),

});
英文:

I'm trying to send user input data to my tRPC API. When I try to send my query, I get an error that I can only use React Hooks inside a function component. I believe I can't call tRPC's useQuery from a callback because it's a react hook, but how can I submit the mutation when the form is completed?

my zip code component

&#39;use client&#39;;

import { type NextPage } from &quot;next&quot;
import { NextPageButtonLink } from &quot;../UI/NextPageButtonLink&quot;
import { api } from &quot;../utils/api&quot;;
import { useState } from &quot;react&quot;;


const ZipCode: NextPage = () =&gt; {
  const [zip code, setZipCode] = useState(&quot;&quot;);
  // This posts on every rerender and input. Ideally, it should only post when the user clicks submit
  // const postZipCodeResult = API.zipcode.postZipCode.use query({userId: &quot;1&quot;, zipcode: zipcode});
  const handleSubmit = () =&gt; {
    // This throws the invalid hook location error
    const postZipCodeResult = API.zipcode.postZipCode.use query({userId: &quot;1&quot;, zipcode: zipcode});

    console.log(&quot;Posting result&quot;, postZipCodeResult)
  }
  return (
    &lt;div className=&quot;bg-[#3276AE] flex flex-col items-center h-screen&quot;&gt;
       &lt;form onSubmit={handleSubmit}&gt;
        &lt;label htmlFor=&quot;zipcode&quot;&gt;Enter your zipcode:
        &lt;input type=&quot;text&quot; id=&quot;zipcode&quot; name=&quot;zipcode&quot; required value={zipcode} onChange={e =&gt; setZipCode(e.target.value)} /&gt;
        &lt;/label&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
        &lt;NextPageButtonLink pageName=&quot;survey&quot; msg=&quot;Click here to start the demographics survey.&quot; /&gt;
    &lt;/div&gt;
  )
}

export default ZipCode;

My zip code page:

import dynamic from &quot;next/dynamic&quot;;

const ZipCode = dynamic(() =&gt; import(&#39;../components/zipcode&#39;), {
  SSR: false
})

export default function ZipCodePage() {
  return (&lt;ZipCode/&gt;)
}


my zip code router

import { z } from &quot;zod&quot;;

import { createTRPCRouter, publicProcedure } from &quot;../trpc&quot;;

export const zipcodeRouter = createTRPCRouter({
  postZipCode: publicProcedure
    .input(z.object({ userId: z.string(), zipcode: z.string() }))
    .query(({ input }) =&gt; {

      return {
        zipcode: `User: ${input.userId} zipcode: ${input.zipcode}`,
      };
    }),

});

答案1

得分: 3

你不能有条件地调用钩子,但你可以禁用查询,然后在用户点击按钮时使用它的 refetch 来触发它。

const ZipCode: NextPage = () => {
  const [zipcode, setZipCode] = useState("");

  const { data, refetch } = api.zipcode.postZipCode.useQuery({ userId: "1", zipcode: zipcode }, {
    enabled: false
  });

  const handleSubmit = () => {
    refetch();
  }

  return (
    <div className="bg-[#3276AE] flex flex-col items-center h-screen">
      <form onSubmit={handleSubmit}>
        <label htmlFor="zipcode">Enter your zipcode:
          <input type="text" id="zipcode" name="zipcode" required value={zipcode} onChange={e => setZipCode(e.target.value)} />
        </label>
        <button type="submit">Submit</button>
      </form>
      {
        data && (
          <pre>{data.zipcode}</pre>
        )
      }
    </div>
  )
}

export default ZipCode;
英文:

You can't call hooks conditionally, but you can disable the query and then use its refetch to fire it when the user clicks the button.

const ZipCode: NextPage = () =&gt; {
  const [zipcode, setZipCode] = useState(&quot;&quot;);

  const { data, refetch } = api.zipcode.postZipCode.useQuery({userId: &quot;1&quot;, zipcode: zipcode}, {
    enabled: false
  });

  const handleSubmit = () =&gt; {
    refetch();
  }

  return (
    &lt;div className=&quot;bg-[#3276AE] flex flex-col items-center h-screen&quot;&gt;
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;label htmlFor=&quot;zipcode&quot;&gt;Enter your zipcode:
        &lt;input type=&quot;text&quot; id=&quot;zipcode&quot; name=&quot;zipcode&quot; required value={zipcode} onChange={e =&gt; setZipCode(e.target.value)} /&gt;
        &lt;/label&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      {
        data &amp;&amp; (
          &lt;pre&gt;{data.zipcode}&lt;/pre&gt;
        )
      }
    &lt;/div&gt;
  )
}

export default ZipCode;

huangapple
  • 本文由 发表于 2023年2月6日 02:52:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/75354721.html
  • javascript
  • next.js
  • reactjs
  • trpc.io
  • typescript