Context: I have a VueJS method that uses a form and Axios to upload an asset to an entry's asset field. The method successfully uploads the asset to the entry, and I can prove that fact via the CraftCMS admin interface. So this works.
Problem: I then have another VueJS method that calls on CraftCMS' GraphQL service to list the assets in the entry's asset field. This works, and returns the assets. But if I add more assets using my VueJS/Axios method above, the assets are added just fine (as confirmed on the CraftCMS admin side), but the GraphQL cache is not updated. So when I refresh the page and make another call to GraphQL, it never shows the new asset(s) unless I manually clear the GraphQL cache in the Craft CMS admin interface.
Questions:
- Can I force the GraphQL cache to be cleared from some kind of javascript / Axios call, or some kind of Twig call on the same page as it loads?
- Can I prevent GraphQL from caching?
- Is this a GraphQL/CraftCMS bug?
- Amy I crazy to think any of this?
Thanks for any ideas/help!
VueJS Method to Load the Asset list
created () {
//Define a global self variable
var self = this;
//Load our query
var queryData = {query: '{entries(section:"caseStudy",id:{{entry.id}}) {...on caseStudy_caseStudy_Entry{id,csImages{id,url,}}}}'};
//Get authorization
var queryHeaders = {headers: {'Authorization': 'Bearer ABCDEFG'}};
//Fetch data from the system using our query
axios.post('/api', queryData, queryHeaders).then(function(queryResponse) {
//Set the uploadAssets data.
self.uploadedAssets = queryResponse.data.data.entries[0].csImages;
}).catch(function (queryError) {
console.log(queryError);
});
},
self.uploadedAssets
Will contain the assets on the asset field as desired. But if I upload new assets using the following VueJS method, GraphQL won't see the new asset(s), but I can prove that they uploaded just fine bucasue in the CrafCMS admin side I can see the news asset(s) in the entry form.
VueJS method to upload the asset to CraftCMS, which works fine.
uploadImage(event) {
//Get the current form data
var formData = new FormData(document.getElementById('formCaseworkEdit'));
//Upload the form data to CraftCMS
axios.post('/', formData).then(function(response) {
//Call a function to retrieve the new list of assets
self.getNewImage(response, self);
}).catch(function (error) {
console.log(error);
});
},
self.getNewImage(response, self);
Will run the same GraphQL Query from the create()
function , but will return the "old" listing of assets. When I manually clear CraftCMS caches, this list returns the new items.