Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-12T22:33:37.623Z
Answers.Text: 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)
Answers.UserDisplayName: Dalton Rooney
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-13T15:50:55.873Z
Answers.Text: 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.
Answers.UserDisplayName: Adrian
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-09T15:18:58.210Z
Answers.LastActivityDate: 2020-05-09T15:18:58.210Z
Answers.UserDisplayName: Adrian
Body: <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>
  
Tags: <craft3><cache><graphql>
Title: Uploading Asset Doesn't Clear GraphQl Cache with VueJS/Axios
ThreadText: # 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:**
  
  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.
  
  **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/username_1/e0f4e7217cc03fd8204a09e2db30209a)  
  > **username_0**: Interesting approach @username_1, I was trying to do this without creating custom modules as much as possible, but a module may be a more refined solution.  
  
  ---
  
  