1

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.

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.

| improve this answer | |
  • Just a hint, you don't have to disable caching altogether - you could create a module that watches for entry save events and flushed the cache afterward. Simple example, untested. – Dalton Rooney May 12 at 22:33
  • Interesting approach @Dalton, I was trying to do this without creating custom modules as much as possible, but a module may be a more refined solution. – Adrian May 13 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.