A space to discuss GraphQL queries, mutations, troubleshooting, throttling, and best practices.
I have been using the Files API (in one of the App that I have been working on) to upload the images from user's local machine. I was able to upload the image successfully (in files) with stagedUploadsCreate mutation and fileCreate mutation. But I am not able to retrieve the url of the file.
See the below response from the fileCreate mutation:
I tried to retrieve the url of the file from preview property of the File instance (returns by the fileCreate mutation), but I always receive the image property of the preview object null. I know it's because the fileStatus is still "UPLOADED" and I may have to wait till the fileStatus become "READY".
My question is, how do I wait for the fileStatus to be "READY" before I get the response from fileCreate mutation ? Or is there any other way to get the file url after it's being uploaded successfully in the files ?
To make a workaround, I tried with writing a separate graphql query to read that specific file (queried with filename and createdAt), but I found out, sometimes it doesn't work when the file take a bit time to get uploaded successfully.
I searched for events too for this purpose, but couldn't find any.
"fileCreate": {
"userErrors": [],
"files": [
{
"createdAt": "2021-10-20T15:24:16Z",
"fileStatus": "UPLOADED",
"fileErrors": [],
"id": "gid://shopify/MediaImage/23117738246329",
"image": null,
"preview": {
"status": "UPLOADED",
"image": null
}
}
]
}
FYI, the fileCreate mutation query that I wrote:
const fileCreated = await client.query({
data: `mutation {
fileCreate(
files: {
originalSource: "${resourceUrl}"
}
) {
userErrors {
field
message
}
files {
createdAt
fileStatus
fileErrors {
code
message
details
}
... on MediaImage {
id
image {
originalSrc
}
}
preview {
status
image {
originalSrc
}
}
}
}
}`,
});
Solved! Go to the solution
This is an accepted solution.
How can we get the id of the ressource from the fileCreate query ?
I do not get it when I try
files {
fileStatus
alt
createdAt
... on GenericFile {
id
}
}
EDIT: I found it
files {
fileStatus
alt
createdAt
... on GenericFile {
id
}
... on MediaImage {
id
}
... on Video {
id
}
Hi!
Did you find the way to get the file url? I'm exactly at the same point.
Best,
Mario
Facing the same issue. Did you, by any chance, managed to find a solution for this?
Hi Bogdan,
No answer from Shopify and not a clue of how to do it.
Finally I did it my self uploading images to AWS S3, where that is not an issue.
Best,
Mario
I was able to get the file ID and url by following up the fileCreate mutation with this query, setting the $created_at variable from data in the fileCreate reply :
{
files (first: 1, query:"created_at:'$created_at'") {
edges {
node {
... on MediaImage {
image {
id
url
altText
height
width
}
}
}
}
}
}
...........
Thanks for this, why Shopify don't supply it on the upload is a mystery.
Coming in quite late on this context. Since I recently bumped in this issue, I'll capture my findings. You can try to use the GraphQL query below, and replace $your-file-id with the id of the resource you got from fileCreate mutation.
{
files (first: 1, query:"id:$your-file-id") {
edges {
node {
... on MediaImage {
image {
id
url
altText
height
width
}
}
}
}
}
}
To learn more visit the Shopify Help Center or the Community Blog.
FileCreate mutation doesn't return any id, or maybe I'm wrong, I don't know
This is an accepted solution.
How can we get the id of the ressource from the fileCreate query ?
I do not get it when I try
files {
fileStatus
alt
createdAt
... on GenericFile {
id
}
}
EDIT: I found it
files {
fileStatus
alt
createdAt
... on GenericFile {
id
}
... on MediaImage {
id
}
... on Video {
id
}