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

<pre><code>  //Disable GraphQL Caching
  'enableGraphQlCaching' =&gt; false,
</code></pre>

<p>To reference it from a <code>.env</code> environment variable use this instead:</p>

<pre><code>  // Disable GraphQL Caching from .env variables
  'enableGraphQlCaching' =&gt; (bool)getenv('ENABLE_GQL_CACHING'),
</code></pre>

<p>Got this info from the amazing folks over at <strong>nystudio107</strong> via this post:
<a href="https://nystudio107.com/blog/using-the-craft-cms-graphql-api-on-the-frontend" rel="nofollow noreferrer">https://nystudio107.com/blog/using-the-craft-cms-graphql-api-on-the-frontend</a></p>

<p>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.</p>

CC BY-SA 4.0
2020-05-12T22:33:37.623Z
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.](https://gist.github.com/daltonrooney/e0f4e7217cc03fd8204a09e2db30209a)
Dalton Rooney
CC BY-SA 4.0
2020-05-13T15:50:55.873Z
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
CC BY-SA 4.0
2020-05-09T15:18:58.210Z
2020-05-09T15:18:58.210Z
Adrian
<p><strong>Context:</strong> 
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.</p>

<p><strong>Problem:</strong>
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. <strong>But</strong> 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.</p>

<p><strong>Questions:</strong> </p>

<ol>
<li>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?</li>
<li>Can I prevent GraphQL from caching?</li>
<li>Is this a GraphQL/CraftCMS bug?</li>
<li>Amy I crazy to think any of this?</li>
</ol>

<p>Thanks for any ideas/help!</p>

<p><strong>VueJS Method to Load the Asset list</strong></p>

<pre><code>  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);
    });        
  },

</code></pre>

<p><code>self.uploadedAssets</code> 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.</p>

<p><strong>VueJS method to upload the asset to CraftCMS, which works fine.</strong></p>

<pre><code> 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);
    });
 },

</code></pre>

<p><code>self.getNewImage(response, self);</code> Will run the same GraphQL Query from the <code>create()</code> function , but will return the "old" listing of assets. When I manually clear CraftCMS caches, this list returns the new items.</p>

<craft3><cache><graphql>
Uploading Asset Doesn't Clear GraphQl Cache with VueJS/Axios
# Uploading Asset Doesn't Clear GraphQl Cache with VueJS/Axios

(Asked by: username_0 on 2020-05-09)

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.

**Tags:** craft3, cache, graphql

---

## 1 answers

### Answer by username_0 on 2020-05-09. Score: 1 | Accepted answer

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.

> **Comments:**
> **username_1**: 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.](https://gist.github.com/daltonrooney/e0f4e7217cc03fd8204a09e2db30209a)  
> **username_0**: 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.  

---

