rare-sapphire•2y ago

useform-metadata

But the error is coming from the UserWithRoles

23 Replies

Omer•2y ago

If useForm's queryResult is returning results then the problem cannot be here

xenogeneic-maroon•2y ago

Correct

Omer•2y ago

Can you check your network requests? There we can find the wrong request

xenogeneic-maroon•2y ago

This is the query that is being sent out: query ($id: ID!) { user (id: $id) } And this is the message in the response: Field "user" of type "UserWithRoles" must have a selection of subfields. Did you mean "user { ... }"?

Omer•2y ago

Does the error go away when you remove the useForm?

xenogeneic-maroon•2y ago

Haven't tried that Give me minute Yes, its still there

Omer•2y ago

Let's try to remove useList as well

xenogeneic-maroon•2y ago

Just caught it It's coming from const { register, handleSubmit } = useReactHookForm({ } Import statement of the same: import { useForm as useReactHookForm } from '@pankod/refine-react-hook-form'

Omer•2y ago

hmm why did you import two forms?

xenogeneic-maroon•2y ago

Both are two different things right?

Omer•2y ago

@pankod/refine-react-hook-form package extends useForm already in core. So just use @pankod/refine-react-hook-form

xenogeneic-maroon•2y ago

Ohh

Omer•2y ago

 const userRolesList = useList<IUserRoles>({
        resource: "userRoles",
        metaData: { fields: [ "id", "type" ] }
    })

    const { register, handleSubmit } = useReactHookForm({ 
refineCoreProps: {
       action: "edit",
        metaData: { fields: [ "id", "name", { user_roles: ["id", "type"], } ] }
}
})

    const formSubmitHandler = e => onFinish(e)

 const userRolesList = useList<IUserRoles>({
        resource: "userRoles",
        metaData: { fields: [ "id", "type" ] }
    })

    const { register, handleSubmit } = useReactHookForm({ 
refineCoreProps: {
       action: "edit",
        metaData: { fields: [ "id", "name", { user_roles: ["id", "type"], } ] }
}
})

    const formSubmitHandler = e => onFinish(e)

xenogeneic-maroon•2y ago

Will this be a good example for me to follow? https://github.com/pankod/refine/blob/master/examples/form/mui/useForm/src/pages/posts/edit.tsx

Omer•2y ago

Yes definitely, you can have a look here to use the properties in core https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#properties

xenogeneic-maroon•2y ago

Working fine now Thank you soo much Ömer Wouldn't have found this if it was not for you

Omer•2y ago

Hooray!!

Do you think we should update the document so others don't make this mistake?

xenogeneic-maroon•2y ago

Yes definitely, I have gone through the documentation many times, but never came across this It will be a great help for everybody

Omer•2y ago

Great, what kind of enhancement do you think would work?

xenogeneic-maroon•2y ago

My bad, its already there.

xenogeneic-maroon•2y ago

Dunno how I missed it

xenogeneic-maroon•2y ago

URL: https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#api

useForm | refine

refine offers a React Hook Form adapter(@pankod/refine-react-hook-form) that allows you to use the React Hook Form library with refine. Thus, you can manage your forms in headless way.

Omer•2y ago

ohh okay, thank you! 🎁