GraphQL Save a form

Question

I would like to save a big form by GrahQL and React. I have all of the form values in one variable name: formValue Is there any way to pass "formValue" to the query like this?

const [toSaveUserProfile] = useMutation(SAVE_USER_PROFILE)
toSaveUserProfile({ variables: formValue })

const SAVE_USER_PROFILE = gql`
  mutation saveUserProfile($profileId: String!) {
    updateProfile(profile: { formValue }) {
     id
    }
  }
`

or I should pass all of the fields one by one and define their types like this?

const [toSaveUserProfile] = useMutation(SAVE_USER_PROFILE)
toSaveUserProfile({ variables: formValue })

const SAVE_USER_PROFILE = gql`
  mutation saveUserProfile($id: String!, $firstName: String, $lastName: String, $age: Int, ......) {
    updateProfile(profile: { id: $id, firstName: $firstName, lastName: $lastName, age:$age, ......}) {
      id
    }
  }
`

the schema looks like something like this

updateProfile(profile: ProfileDTOInput!): ProfileDTO

type ProfileDTO {
  address: String
  emails: String
  employeeId: String
  firstName: String
  lastName: String
  age: Int
  phone: [PhoneDTO]
}

input ProfileDTOInput {
  lastName: String
  phone: [PhoneDTO] 
  address: String
  age: Int
  employeeId: String
  emails: String
  firstName: String
} 

type PhoneDTO {
  number: String
  phoneType: String
}

input PhoneDTOInput {
  phoneType: String
  number: String
}

score 5 · Accepted Answer · answered Nov 27 '20 at 22:02

5

You should use the GraphQL input type for this scenario. Why? GraphQL input types are useful for keeping argument definitions short and sweet, especially in cases like yours. For instance, this:

mutation saveUserProfile($id: String!, $firstName: String, $lastName: String, $age: Int, ......)

has the potential to expand to an endless list of arguments for the mutation you've defined. Not only is this hard to write, but it is also hard to maintain and read.

Instead, using an input type would simplify this greatly.

input SaveUserProfileInput {
  id: ID!
  firstName: String
  lastName: String
  ...
}

mutation saveUserProfile($input: SaveUserProfileInput!) {
  updateProfile(input: $input) {
    ...rest of your code here...
  }
}

Your mutation now only takes one argument -- an input type -- which is defined on its own. As the schema designer, you can expand these fields however you like, in a single place. Your mutation definition, and the arguments that it takes, will never need to change.

Note that you'll need to change the schema definition of your mutation updateProfile to accept an input as an argument of type SaveUserProfileInput (or whatever you have named it) if you follow this approach.

For more information on input types, I suggest looking at this great post by Daniel Rearden:

https://stackoverflow.com/a/55881719/4301222

answered Nov 27 '20 at 22:02

JosephHall

631
6
8

Thanks for descriptive answer. Is it a solution for "client" side? I am using Apollo's Client. And shall I ask the back-end team, if they support "input type"? – Mehran Ishanian Nov 29 '20 at 04:39
Good question. No, this would require your backend team to change the schema to support this. If the schema doesn't change, then to answer the question of your original post, you'll need to follow whatever rules your schema defines. The client side does not have a choice about how it passes arguments to a query or mutation. – JosephHall Nov 29 '20 at 04:54
@MehranIshanian Can you edit your question to include your graphql schema? – JosephHall Nov 29 '20 at 04:55
@JosehHall, I appreciate your time. How can I get the graphql Schema? I have added what I know about this mutation in the question but if there is a way to get the schema please let me know – Mehran Ishanian Nov 30 '20 at 17:43
@MehranIshanian You can either inspect your schema with GraphiQL or Apollo Playground (if you're using apollo-server on the backend), or with this package: https://github.com/prisma-labs/get-graphql-schema -- just point `get-graphql-schema` to the URL where your API is hosted, and it will handle the rest. – JosephHall Nov 30 '20 at 19:25
perfect. thanks. I got the schema and added to my question – Mehran Ishanian Dec 01 '20 at 18:53
I appreciate it if you may kindly let me know what is the best way to write mutation for client – Mehran Ishanian Dec 02 '20 at 19:53

GraphQL Save a form

1 Answers1