Theo's Typesafe Cult•17mo ago

useState from TRPC Query

Hi - this is a noob question sorry. I'm wanting to create a dropdown of all the values returned by a query i.e. groups but I can't do a useState as I get Error: Rendered more hooks than during the previous render. This is my code:

import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0])

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
        </>
    )
}

import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0])

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
        </>
    )
}

9 Replies

barry•17mo ago

It's already a state Why are you trying to make a state based on it

thorin_17OP•17mo ago

I'm wanting to create a dropdown with select / option then run a useEffect to reupdate the data I think I"ve gotten myself confused sorry

Brendonovich•17mo ago

putting the item in a useState isn't the worst thing, but a better approach is to just store the item's id in state though the reason you're getting that error is bc you're returning early before declaring the useState your components can't return until all their hooks have been called or you will get that error

barry•17mo ago

I still don't get what this code is trying to do

thorin_17OP•17mo ago

import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0]?.id)

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
            <select name="group" value={group}>
                {groups.data.map(option => {
                    <option id={option.id} value={option.id}>{option.name}</option>
                })}
            </select>
        </>
    )
}

import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0]?.id)

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
            <select name="group" value={group}>
                {groups.data.map(option => {
                    <option id={option.id} value={option.id}>{option.name}</option>
                })}
            </select>
        </>
    )
}

barry•17mo ago

Can't you just, let it be uncontrolled

thorin_17OP•17mo ago

At the moment I just wanted a dropdown with all the values with the ability to see the current one

barry•17mo ago

Ah Just move the state up and do it like a normal controlled input And set the state in the onsuccess

Ramsay•17mo ago

Don't use onSuccess, it's being removed https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#state-syncing just split the form into it's own component and pass the data to that component where you put pass the data as the default value to useState. Here's an example https://tkdodo.eu/blog/react-query-and-forms#data-might-be-undefined

React Query and Forms

Forms tend to blur the line between server and client state, so let's see how that plays together with React Query.

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

Gaming

Programming

useState from TRPC Query