How do I set the default useState value of a trpc call?

EDIT: Sorry apparently I can't rename the title. I meant to say: 'How do I set a default useState value to something that came from a trpc call'

Hi folks, so I need some help with my component

It's a simple team switcher. I need help understanding a few things. I have two main trpc endpoints:

getAllForLoggedUser

getAllForLoggedUser

getAllForLoggedUser

getAllForLoggedUser and

switchActiveWorkspace

switchActiveWorkspace

switchActiveWorkspace

switchActiveWorkspace.
one thing: whenever I am reloading this component fresh new, I am not being able to set the default value of the useState call. The default value is not being set. How can I make it so it sets the default value that came from the trpc call

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
  const ctx = api.useContext();
  const { data: session } = useSession();

  const { data: workspaces } = api.workspace.getAllForLoggedUser.useQuery(
    undefined,
    {
      enabled: session?.user !== undefined,
    }
  );

  const { mutateAsync } = api.user.switchActiveWorkspace.useMutation({
    onSuccess: () => {
      void ctx.workspace.getAllForLoggedUser.invalidate();
    },
  });

  const [selectedWS, setSelectedWS] = React.useState<Workspace>({
    id: session?.user?.activeWorkspaceId || "",
    name:
      workspaces?.find((w) => w.id === session?.user?.activeWorkspaceId)
        ?.name || "", //This was supposed to be working 🥲
  });

  return (
    {/*tsx Code.
      At some point there is a mapping of the workspaces array and on each item there is a onSelect like this
      onSelect={() => {
                      setSelectedWS({
                        id: ws.id,
                        name: ws.name,
                      });
                      setOpen(false);
                      void mutateAsync({ workspaceId: ws.id });
                    }}
  */}
  )
}

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
  const ctx = api.useContext();
  const { data: session } = useSession();

  const { data: workspaces } = api.workspace.getAllForLoggedUser.useQuery(
    undefined,
    {
      enabled: session?.user !== undefined,
    }
  );

  const { mutateAsync } = api.user.switchActiveWorkspace.useMutation({
    onSuccess: () => {
      void ctx.workspace.getAllForLoggedUser.invalidate();
    },
  });

  const [selectedWS, setSelectedWS] = React.useState<Workspace>({
    id: session?.user?.activeWorkspaceId || "",
    name:
      workspaces?.find((w) => w.id === session?.user?.activeWorkspaceId)
        ?.name || "", //This was supposed to be working 🥲
  });

  return (
    {/*tsx Code.
      At some point there is a mapping of the workspaces array and on each item there is a onSelect like this
      onSelect={() => {
                      setSelectedWS({
                        id: ws.id,
                        name: ws.name,
                      });
                      setOpen(false);
                      void mutateAsync({ workspaceId: ws.id });
                    }}
  */}
  )
}

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
  const ctx = api.useContext();
  const { data: session } = useSession();

  const { data: workspaces } = api.workspace.getAllForLoggedUser.useQuery(
    undefined,
    {
      enabled: session?.user !== undefined,
    }
  );

  const { mutateAsync } = api.user.switchActiveWorkspace.useMutation({
    onSuccess: () => {
      void ctx.workspace.getAllForLoggedUser.invalidate();
    },
  });

  const [selectedWS, setSelectedWS] = React.useState<Workspace>({
    id: session?.user?.activeWorkspaceId || "",
    name:
      workspaces?.find((w) => w.id === session?.user?.activeWorkspaceId)
        ?.name || "", //This was supposed to be working 🥲
  });

  return (
    {/*tsx Code.
      At some point there is a mapping of the workspaces array and on each item there is a onSelect like this
      onSelect={() => {
                      setSelectedWS({
                        id: ws.id,
                        name: ws.name,
                      });
                      setOpen(false);
                      void mutateAsync({ workspaceId: ws.id });
                    }}
  */}
  )
}

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
  const ctx = api.useContext();
  const { data: session } = useSession();

  const { data: workspaces } = api.workspace.getAllForLoggedUser.useQuery(
    undefined,
    {
      enabled: session?.user !== undefined,
    }
  );

  const { mutateAsync } = api.user.switchActiveWorkspace.useMutation({
    onSuccess: () => {
      void ctx.workspace.getAllForLoggedUser.invalidate();
    },
  });

  const [selectedWS, setSelectedWS] = React.useState<Workspace>({
    id: session?.user?.activeWorkspaceId || "",
    name:
      workspaces?.find((w) => w.id === session?.user?.activeWorkspaceId)
        ?.name || "", //This was supposed to be working 🥲
  });

  return (
    {/*tsx Code.
      At some point there is a mapping of the workspaces array and on each item there is a onSelect like this
      onSelect={() => {
                      setSelectedWS({
                        id: ws.id,
                        name: ws.name,
                      });
                      setOpen(false);
                      void mutateAsync({ workspaceId: ws.id });
                    }}
  */}
  )
}

GabrielOP•5/2/23, 11:04 PM

Here's the full code if needed

GabrielOP•5/2/23, 11:04 PM

message.txt8.42KB

Neto•5/3/23, 12:02 AM

put the useState above the queries

Neto•5/3/23, 12:02 AM

onSuccess of the query, update the state

Neto•5/3/23, 12:04 AM

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
  const ctx = api.useContext();
  const { data: session } = useSession();

  const [selectedWS, setSelectedWS] = React.useState<some_type>({
    id: session?.user?.activeWorkspaceId || "",
    name:
      workspaces?.find((w) => w.id === session?.user?.activeWorkspaceId)
        ?.name || "", //This was supposed to be working 🥲
  });


  const { data: workspaces } = api.workspace.getAllForLoggedUser.useQuery(
    undefined,
    {
      enabled: session?.user !== undefined,
      onSuccess: (data) => {
        const newSelectedWS = some_logic_goes_where
        setSelectedWS(newSelectedWS)
      }
    }
  );

  const { mutateAsync } = api.user.switchActiveWorkspace.useMutation({
    onSuccess: () => {
      void ctx.workspace.getAllForLoggedUser.invalidate();
    },
  });


  return (
   <></>
  )
}

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
  const ctx = api.useContext();
  const { data: session } = useSession();

  const [selectedWS, setSelectedWS] = React.useState<some_type>({
    id: session?.user?.activeWorkspaceId || "",
    name:
      workspaces?.find((w) => w.id === session?.user?.activeWorkspaceId)
        ?.name || "", //This was supposed to be working 🥲
  });


  const { data: workspaces } = api.workspace.getAllForLoggedUser.useQuery(
    undefined,
    {
      enabled: session?.user !== undefined,
      onSuccess: (data) => {
        const newSelectedWS = some_logic_goes_where
        setSelectedWS(newSelectedWS)
      }
    }
  );

  const { mutateAsync } = api.user.switchActiveWorkspace.useMutation({
    onSuccess: () => {
      void ctx.workspace.getAllForLoggedUser.invalidate();
    },
  });


  return (
   <></>
  )
}

GabrielOP•5/3/23, 12:11 AM

@Neto But this way, workspaceworkspace (where the useState is invoked) will be used before it's being defined.

GabrielOP•5/3/23, 12:13 AM

OOh I see what you mean

Neto•5/3/23, 12:13 AM

if the state is derived from the query

Neto•5/3/23, 12:13 AM

you can make a "blank" state and update when the query finishes

GabrielOP•5/3/23, 12:18 AM

This fixed it!! Thank you so much