A space to discuss GraphQL queries, mutations, troubleshooting, throttling, and best practices.
Hello.
I am trying to get a reference back to a successfully uploaded file using the mutation fileCreate.
The reply I get back after using the mutation does not have much useful information about the uploaded file. The file is added to the Settings/Files page in the admin section of my store.
Here is the mutation I'm using, with the $files variable of course set to an array containing "alt", "contentType", and "originalSource"
mutation fileCreate($files: [FileCreateInput!]!) {
fileCreate(files: $files) {
files {
alt
createdAt
fileErrors {
code
details
message
}
fileStatus
preview {
... on MediaPreviewImage {
image {
id
url
altText
height
width
}
}
status
}
}
userErrors {
code
field
message
}
}
}
I added the MediaPreviewImage fragment in an attempt to debug, though it does not make any difference if it's there or not.
My problem is that the "preview" is always null, even though the upload was successful, and I don't see any other fields I can add to get the information I want.
I am able to get this information using the following query, where the $created_at variable is set to the value I get from the upload mutation above.
{
files (first: 1, query:"created_at:\'$created_at\'") {
edges {
node {
... on MediaImage {
image {
id
url
altText
height
width
}
}
}
}
}
}
Is this extra step really necessary to get the ID and url of the newly uploaded image?
I think you found a solution already, but here is what I found from looking at query data when uploading a file on the UI. Just use your own file source on the variable.
Returns the gid for the uploaded file.
const data = await client.query({
data: {
query: `mutation FileCreateMutation($input: [FileCreateInput!]!) {
fileCreate(files: $input) {
files {
alt
... on GenericFile {
id
createdAt
__typename
}
... on MediaImage {
id
createdAt
__typename
}
... on Video {
id
createdAt
__typename
}
__typename
}
userErrors {
code
field
message
__typename
}
__typename
}
}`,
variables: {
input: [
{
contentType: "IMAGE",
originalSource: src,
},
],
},
},
});