Hook issue when calling server function

Hello! I'm running into an issue when trying to use a server function. Code looks like:

// functions.ts
export const getUser = createServerFn({ method: "GET" }).handler(async () => {
  console.log("||||||| getUser |||||||"); // XXX: REMOVE THIS
});

// layout.tsx
function LayoutHeader() {
  const {
    data: user,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["user"],
    queryFn: () => useServerFn(getUser),
  });

console.log({ user, isLoading, error });

return <div />
}

// functions.ts
export const getUser = createServerFn({ method: "GET" }).handler(async () => {
  console.log("||||||| getUser |||||||"); // XXX: REMOVE THIS
});

// layout.tsx
function LayoutHeader() {
  const {
    data: user,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["user"],
    queryFn: () => useServerFn(getUser),
  });

console.log({ user, isLoading, error });

return <div />
}

And once loading is

false

false

I get the following in the returned error parameter: "Error: Minified React error #321; visit https://react.dev/errors/321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings."

Any thoughts? What should I check? Would any other information be helpful?

Minified React error #321 – React

The library for web and native user interfaces

TanStack•12mo ago•

3 replies

recent-teal

Hook issue when calling server function

Hello! I'm running into an issue when trying to use a server function. Code looks like:

// functions.ts
export const getUser = createServerFn({ method: "GET" }).handler(async () => {
  console.log("||||||| getUser |||||||"); // XXX: REMOVE THIS
});

// layout.tsx
function LayoutHeader() {
  const {
    data: user,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["user"],
    queryFn: () => useServerFn(getUser),
  });

console.log({ user, isLoading, error });

return <div />
}

// functions.ts
export const getUser = createServerFn({ method: "GET" }).handler(async () => {
  console.log("||||||| getUser |||||||"); // XXX: REMOVE THIS
});

// layout.tsx
function LayoutHeader() {
  const {
    data: user,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["user"],
    queryFn: () => useServerFn(getUser),
  });

console.log({ user, isLoading, error });

return <div />
}

And once loading is

false

false

Minified React error #321 – React

The library for web and native user interfaces

Hook issue when calling server function

Similar Threads

Hook issue when calling server function

Similar Threads

Similar Threads

Similar Threads