How to create an object with a mutation. Getting React error `Invalid hook call`

Hi, would be great if I could some help here

Here is my userRouter,

getAll

getAll

already works without issues. However I dont manage to create objects in my database.

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

export const userRouter = createTRPCRouter({
  create: publicProcedure.mutation(async ({ ctx }) => {
    return await ctx.prisma.user.create({
      data: {
        email: "create@test.com",
        firstName: "Peter",
        lastName: "Hansen",
        role: "MANAGER",
        clientId: "clhg7tzgz0000nhp0zwfmc0jm",
      },
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.user.findMany();
  }),
});

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

export const userRouter = createTRPCRouter({
  create: publicProcedure.mutation(async ({ ctx }) => {
    return await ctx.prisma.user.create({
      data: {
        email: "create@test.com",
        firstName: "Peter",
        lastName: "Hansen",
        role: "MANAGER",
        clientId: "clhg7tzgz0000nhp0zwfmc0jm",
      },
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.user.findMany();
  }),
});

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

export const userRouter = createTRPCRouter({
  create: publicProcedure.mutation(async ({ ctx }) => {
    return await ctx.prisma.user.create({
      data: {
        email: "create@test.com",
        firstName: "Peter",
        lastName: "Hansen",
        role: "MANAGER",
        clientId: "clhg7tzgz0000nhp0zwfmc0jm",
      },
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.user.findMany();
  }),
});

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

export const userRouter = createTRPCRouter({
  create: publicProcedure.mutation(async ({ ctx }) => {
    return await ctx.prisma.user.create({
      data: {
        email: "create@test.com",
        firstName: "Peter",
        lastName: "Hansen",
        role: "MANAGER",
        clientId: "clhg7tzgz0000nhp0zwfmc0jm",
      },
    });
  }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.user.findMany();
  }),
});

I have a "Create" Page where I get an error when I try to use the mutation to create a User in the database.

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const createUser = () => {
    api.users.create.useMutation();
  };
  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => createUser()}>Click Me</button>
    </>
  );
};

export default Create;

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const createUser = () => {
    api.users.create.useMutation();
  };
  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => createUser()}>Click Me</button>
    </>
  );
};

export default Create;

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const createUser = () => {
    api.users.create.useMutation();
  };
  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => createUser()}>Click Me</button>
    </>
  );
};

export default Create;

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const createUser = () => {
    api.users.create.useMutation();
  };
  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => createUser()}>Click Me</button>
    </>
  );
};

export default Create;

The error I get is

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

I appreciate any help I can get, thank you!

clemwoOP•5/9/23, 3:33 PM

I found the solution to the issue here: tRPC Mutation

My code now works like this:

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const { mutate } = api.users.create.useMutation();

  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => mutate()}>Click Me</button>
    </>
  );
};

export default Create;

import { type NextPage } from "next";
import Header from "~/components/Header/Header";
import { api } from "~/utils/api";

const Create: NextPage = () => {
  const { mutate } = api.users.create.useMutation();

  return (
    <>
      <Header header="Create" />
      <p>Create new Users here!</p>
      <button onClick={() => mutate()}>Click Me</button>
    </>
  );
};

export default Create;

How to create an object with a mutation. Getting React error `Invalid hook call`

Similar Threads

Similar Threads

Similar Threads