useform-metadata

dangerous-fuchsia · 2022-10-13T08:47:34.810Z

But the error is coming from the UserWithRoles

O

Omer•10/13/22, 8:48 AM

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

D

dangerous-fuchsiaOP•10/13/22, 8:49 AM

Correct

O

Omer•10/13/22, 8:49 AM

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

D

dangerous-fuchsiaOP•10/13/22, 8:50 AM

This is the query that is being sent out:

query ($id: ID!) { user (id: $id)  }

query ($id: ID!) { user (id: $id) }

query ($id: ID!) { user (id: $id)  }

query ($id: ID!) { user (id: $id) }

D

dangerous-fuchsiaOP•10/13/22, 8:50 AM

And this is the message in the response:

Field "user" of type "UserWithRoles" must have a selection of subfields. Did you mean "user { ... }"?

Field "user" of type "UserWithRoles" must have a selection of subfields. Did you mean "user { ... }"?

Field "user" of type "UserWithRoles" must have a selection of subfields. Did you mean "user { ... }"?

Field "user" of type "UserWithRoles" must have a selection of subfields. Did you mean "user { ... }"?

O

Omer•10/13/22, 8:51 AM

Does the error go away when you remove the useForm?

D

dangerous-fuchsiaOP•10/13/22, 8:51 AM

Haven't tried that

D

dangerous-fuchsiaOP•10/13/22, 8:51 AM

Give me minute

D

dangerous-fuchsiaOP•10/13/22, 8:53 AM

Yes, its still there

O

Omer•10/13/22, 8:53 AM

Let's try to remove useList as well

D

dangerous-fuchsiaOP•10/13/22, 8:58 AM

Just caught it

D

dangerous-fuchsiaOP•10/13/22, 8:58 AM

It's coming from

const { register, handleSubmit } = useReactHookForm({ }

const { register, handleSubmit } = useReactHookForm({ }

const { register, handleSubmit } = useReactHookForm({ }

const { register, handleSubmit } = useReactHookForm({ }

D

dangerous-fuchsiaOP•10/13/22, 8:59 AM

Import statement of the same:

import { useForm as useReactHookForm } from '@pankod/refine-react-hook-form'

import { useForm as useReactHookForm } from '@pankod/refine-react-hook-form'

import { useForm as useReactHookForm } from '@pankod/refine-react-hook-form'

import { useForm as useReactHookForm } from '@pankod/refine-react-hook-form'

O

Omer•10/13/22, 9:02 AM

hmm why did you import two forms?

D

dangerous-fuchsiaOP•10/13/22, 9:03 AM

Both are two different things right?

O

Omer•10/13/22, 9:05 AM

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

D

dangerous-fuchsiaOP•10/13/22, 9:05 AM

Ohh

O

Omer•10/13/22, 9:06 AM

 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)

 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)

D

dangerous-fuchsiaOP•10/13/22, 9:06 AM

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

O

Omer•10/13/22, 9:07 AM

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

D

dangerous-fuchsiaOP•10/13/22, 9:08 AM

Working fine now

D

dangerous-fuchsiaOP•10/13/22, 9:09 AM

Thank you soo much Ömer

D

dangerous-fuchsiaOP•10/13/22, 9:09 AM

Wouldn't have found this if it was not for you

O

Omer•10/13/22, 9:10 AM

Hooray!! <a

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

D

dangerous-fuchsiaOP•10/13/22, 9:10 AM

Yes definitely, I have gone through the documentation many times, but never came across this

D

dangerous-fuchsiaOP•10/13/22, 9:11 AM

It will be a great help for everybody

O

Omer•10/13/22, 9:11 AM

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

D

dangerous-fuchsiaOP•10/13/22, 9:13 AM

My bad, its already there.

D

dangerous-fuchsiaOP•10/13/22, 9:13 AM

Dunno how I missed it

D

dangerous-fuchsiaOP•10/13/22, 9:13 AM

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.

O

Omer•10/13/22, 9:25 AM

ohh okay, thank you!