T
TanStack•6mo ago
generous-apricot

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 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
2 Replies
conscious-sapphire
conscious-sapphire•6mo ago
dont use useServerFn in there use the react-router-with-query package as shown by our examples
generous-apricot
generous-apricotOP•6mo ago
Got it and thanks 👍

Did you find this page helpful?