StagedUploads get a permanent CDN url

Retired Boards Appdev Graphql Basics And Troubleshooting
1

Hi! I use the stagedUploadsCreate method to upload the file, then use the fileCreate method throw GraphQL API. But the url received in the “resourceUrl” field is not quite correct - the file is deleted from the staged cdn (shopify-staged-uploads.storage . googleapis …) after a few days. How do I get the final url of a file that is served via Shopify CDN (as in “settings” - “files” in Admin panel)?

image.png
image.png967×404 46.7 KB

2

Hi @kelreel :waving_hand:

You can use the fileCreate mutation to create file assets that are added to the Admin > Settings > Files page.

Hope that helps!

3

I am already using fileCreate mutation, how can I programmatically get the url of the file from it, which will be saved on the Shopify CDN?

4

The returned file is an interface, so you will need to fragment on the [GenericFile](https://shopify.dev/api/admin-graphql/2022-10/objects/GenericFile),[MediaImage](https://shopify.dev/api/admin-graphql/2022-10/objects/MediaImage) a Video objects depending on the type of file you’ve created. It can be fetched as part of the fileCreate mutation or by querying the files to fragment:

mutation fileCreate($files: [FileCreateInput!]!) {
    fileCreate(files: $files) {
        files {
            ... Files
        }
    }
}

query {
    files (first:3, sortKey: CREATED_AT, reverse: true){
        nodes {
            ... Files
        }
    }
}

fragment Files on File {
    ... on GenericFile {
        url
    }
    ... on MediaImage {
        image {
            url
        }
    }
    ... on Video {
        sources {
            url
        }
    }
}
5

@ShopifyDevSup

I try your code. It looks ok but the query is giving a null for the latest image:

{
    'data': {
        'files': {
            'nodes': [{
                    'createdAt': '2023-03-08T04:46:26Z',
                    'image': None
                }, {
                    'createdAt': '2023-03-07T10:32:59Z',
                    'image': {
                        'url': 'https://cdn.shopify.com/s/files/1/1498/3202/files/vadim-sherbakov-tCICLJ5ktBE-unsplash.jpg?v=1678185180'
                    }
                }, {
                    'createdAt': '2023-03-07T10:11:43Z',
                    'image': {
                        'url': 'https://cdn.shopify.com/s/files/1/1498/3202/files/food-og4.jpg?v=1678183904'
                    }
                }
            ]
        }
    },
    'extensions': {
        'cost': {
            'requestedQueryCost': 8,
            'actualQueryCost': 6,
            'throttleStatus': {
                'maximumAvailable': 1000.0,
                'currentlyAvailable': 994,
                'restoreRate': 50.0
            }
        }
    }
}

After the file is created, the image url cannot be fetched immediately. I try to use Shopify GraphiQL App to run query again. The image url is shown again. What can I do here? Try to poll for the latest image?

6

Hi @jam_chan :waving_hand:

I’d recommend using MediaImage.status and MediaImage.fileStatus to poll and determine whether the URL has been generated yet.

Hope that helps!