Uploading Asset Doesn't Clear GraphQl Cache with VueJS/Axios

Question

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:

1. 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?
2. Can I prevent GraphQL from caching?
3. Is this a GraphQL/CraftCMS bug?
4. 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.

Answer 1

Welp, as they say, "There's a config setting for that" - :facepalm: - If you add the following to your /config/general.php file it will disable GraphQL caching completely:

  //Disable GraphQL Caching
  'enableGraphQlCaching' => false,

To reference it from a .env environment variable use this instead:

  // Disable GraphQL Caching from .env variables
  'enableGraphQlCaching' => (bool)getenv('ENABLE_GQL_CACHING'),

Got this info from the amazing folks over at nystudio107 via this post: https://nystudio107.com/blog/using-the-craft-cms-graphql-api-on-the-frontend

Ideally if there was a way to flush the GraphQL cache at the time I need it that would be more precise, but disabling the GraphQL cache all together solves the problem.