trpc useQuery adds "?" to the url every fetch, refreshing the page and resetting the state

I am using create-t3-app with all the included "addons"

  // snippet from my pages/admin.tsx
  const context = api.useContext();

  const getUsersQuery = api.adminRouter.getUsers.useQuery();
  const createUserMutation = api.adminRouter.createUser.useMutation();
  const editUserMutation = api.adminRouter.editUser.useMutation();
  const deleteUserMutation = api.adminRouter.deleteUser.useMutation();

  const closeModal = () => {
    setEditUser(false);
    setShowNewAccountModal(false);
  };

  const createAccount: CreateAccount = async (email, flags) => {
    if (editUser) {
      await editUserMutation.mutateAsync({ email, flags });
    } else {
      await createUserMutation.mutateAsync({ email, flags });
    }
    closeModal();
    await context.adminRouter.getUsers.invalidate();
  };

  // snippet from my pages/admin.tsx
  const context = api.useContext();

  const getUsersQuery = api.adminRouter.getUsers.useQuery();
  const createUserMutation = api.adminRouter.createUser.useMutation();
  const editUserMutation = api.adminRouter.editUser.useMutation();
  const deleteUserMutation = api.adminRouter.deleteUser.useMutation();

  const closeModal = () => {
    setEditUser(false);
    setShowNewAccountModal(false);
  };

  const createAccount: CreateAccount = async (email, flags) => {
    if (editUser) {
      await editUserMutation.mutateAsync({ email, flags });
    } else {
      await createUserMutation.mutateAsync({ email, flags });
    }
    closeModal();
    await context.adminRouter.getUsers.invalidate();
  };

what happens is when I fill in the form, and submit it, createAccount(email, flags) is called, it then loads and the page is refreshed the url changes from localhost:3000/admin to localhost:3000/admin? the only reason this is an issue is because of how im handling the panel with different "pages" and tabs with the navbar, stored in useState which is reset when the page refreshes making the user have to click the Accounts tab again anyone know what I am doing wrong?

Solution:

submitting a form natively "reloads" the page, because it is meant to "send data" by requesting the "next page". The "next page" can actually be configured with the action attribute on the form. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action I'm putting lots of quotes everywhere because it's how we used to do things in the olden days of the web. Now if you don't want this behavior you should add a event.preventDefault() on the submit event of the form (which you might already be using to trigger your mutation so it should be straightforward) ```jsx...

: The Form element - HTML: HyperText Markup Language | MDN

The HTML element represents a document section containing interactive controls for submitting information.

Jump to solution

4 Replies

Solution

bostonsheraff•2y ago

const {mutate} = trpc.foo.bar.useMutation()
const onSubmit = (event) => {
  event.preventDefault()
  mutate()
}
return (
  <form onSubmit={onSubmit}>
    <button>click me</button>
  </form>
)

const {mutate} = trpc.foo.bar.useMutation()
const onSubmit = (event) => {
  event.preventDefault()
  mutate()
}
return (
  <form onSubmit={onSubmit}>
    <button>click me</button>
  </form>
)

: The Form element - HTML: HyperText Markup Language | MDN

The HTML element represents a document section containing interactive controls for submitting information.

pachOP•2y ago

its a form thats why thank you so much

pachOP•2y ago

also just for anyone who happens to read this, is how im using the useContext and .invalidate() in the endpoint the "proper" usage for refetching the data?

tawaliou•2y ago

Yes, it's the eight manner like it did in the doc: https://create.t3.gg/en/usage/trpc#optimistic-updates

Create T3 App

tRPC 🚀 Create T3 App

The best way to start a full-stack, typesafe Next.js app.

Gaming

Programming

trpc useQuery adds "?" to the url every fetch, refreshing the page and resetting the state