GraphQL Webform Drupal module
A module to integrate webform with the graphql module.
IMPORTANT: This is a module under active development and it does not support all webform features and elements yet. Feel free to raise Feature Requests and to contribute :)
Pre-Requisites
Install
composer require drupal/graphql_webform
Supported elements
- Text Field
- Textarea
- Hidden
- Date
- Checkboxes
- Radios
- Select
- File
- Actions
- Markup
- Webform Term Select
- Webform Entity Select
- Number
- Composite (with the above items supported)
- Time
Retrieve webform elements
Make sure to grant the access webform configuration permission to the users
who need to access the webform over GraphQL. This can be done individually per
webform in Build > Settings > Access > Access Webform configuration, or globally
by granting the access any webform configuration permission.
{
webformById(id: "contact") {
title
description
elements {
... on WebformElement {
key
type
}
... on WebformElementWebformActions {
submitLabel
}
... on WebformElementTextBase {
title
defaultValue
required {
message
}
size
minLength
maxLength
pattern {
message
rule
}
placeholder
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementMarkup {
markup
}
... on WebformElementTextarea {
rows
}
... on WebformElementHidden {
defaultValue
}
... on WebformElementDate {
dateMin
dateMax
step
defaultValue
title
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementOptionsBase {
title
defaultValue
options {
title
value
}
required {
message
}
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementSelect {
emptyOption {
title
value
}
}
... on WebformElementManagedFile {
title
fileExtensions
required {
message
}
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementWebformTermSelect {
title
description
multiple
options(depth: 1) {
value
title
}
}
... on WebformElementComposite {
elements {
id
type
multiple {
limit # 0 means Unlimited config.
message
}
}
}
... on WebformElementNumber{
required {
message
}
min
max
size
step
}
}
}
}Create a webform submission
mutation submit(
$id: String!,
$elements: [WebformSubmissionElement]!,
) {
submitWebform(
id: $id,
elements: $elements,
) {
errors
validationErrors {
element
messages
}
submission {
id
webform {
id
}
}
}
}The $elements argument is an array of WebformSubmissionElement objects. Here
is an example payload:
{
"id": "my_webform",
"elements": [
{
"element": "email",
"value": "me@mysite.com"
},
{
"element": "checkboxes",
"value": [
"some_value",
"another_value"
]
}
]
}validationErrors will contain error messages for each element that failed
validation. errors will contain general errors, such as if the webform
submission failed because the form is closed.
Create a webform submission when webform contains File elements
If the webform contains a File field, you need to submit/create the file before
creating the submission itself. There is a webformFileUpload mutation
available.
mutation createFile($file: Upload!){
webformFileUpload(file: $file, id:"contact", webform_element_id: "upload_your_file") {
errors
violations
entity {
entityId
}
... on WebformFileUploadOutput {
fid
}
}
}As the result you can check for errors, violations, entity and entityId. You can
query for entity > entityId or fid to get the file id that was just created.
fid is a necessary GraphQL field for cases where the graphql is performed by
anonymous users and the file has been uploaded to the private folder.
When you get the fid (e.g. 1910) you then update the $values variable with it:
{
"values": "{\"id\":\"contact\",\"subject\":\"This is the subject\",\"message\":\"Hey, I have a question\",\"date_of_birth\":\"05\/01\/1991\",\"email\":\"email@example.com\",\"upload_your_file\":\"1910\"}"
}Create a webform submission with a source entity
If the webform supports a source entity, you can pass in the variables with the
data, the same as with id. For example, if your webform's URL is:
/form/my-form?source_entity_id=123&source_entity_type=node
Pass the following JSON encoded values:
{
"id": "my_form",
"source_entity_id": "123",
"source_entity_type": "node",
"subject":"This is the subject",
"message":"Hey, I have a question",
"date_of_birth":"05/01/1930",
"email":"email@example.com"
}The mutation will automatically pass these values to the webform submission.