OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Filepond & Nextjs: How revalidate or even cache the XMLHttpRequest in Nextjs?

  • Thread starter Thread starter jexroid
  • Start date Start date
J

jexroid

Guest
As you might know, Nextjs automatically caches the response of a fetch method and its 'force-cache' by default, But I'm using Filepond with react adaptor, and I can't cache, tag, or revalidate anything since Filepond is using XMLHttpRequest to track the progress percentage, aborting and lots more which is impossible to do with fetch here is how FilePond works:

Code:
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
  const formData = new FormData();
  formData.append(fieldName, file, file.name);

  const request = new XMLHttpRequest();
  request.open('POST', '/api/docs');

  // Should call the progress method to update the progress to 100% before calling load
  // Setting computable to false switches the loading indicator to infinite mode
  request.upload.onprogress = (e) => {
    progress(e.lengthComputable, e.loaded, e.total);
  };

  // Should call the load method when done and pass the returned server file id
  // this server file id is then used later on when reverting or restoring a file
  // so your server knows which file to return without exposing that info to the client
  request.onload = function () {
    if (request.status == 200) {
      // the load method accepts either a string (id) or an object
      load(request.responseText);
    } else {
      // Can call the error method if something is wrong, should exit after
      error('oh no');
    }
  };

  request.send(formData);

  // Should expose an abort method so the request can be canceled
  return {
    abort: () => {
      // This function is entered if the user has tapped the cancel button
      request.abort();

      // Let FilePond know the request has been canceled
      abort();
    },
  };
},

you can read more in this link

and since nextjs didn't extended XMLHttpRequest like fetch():

Code:
await fetch("/api/docs", {
        next: { tags: ['docs'] },
        cache: 'force-cache'
});

I can't cache or tag it to revalidate it in my API route. I am using nextjs version 14.2.3 right now and I know it's a feature that nextjs needs to add but I want to know if anyone solved it...

<p>As you might know, Nextjs automatically caches the response of a fetch method and its <code>'force-cache'</code> by default, But I'm using <strong>Filepond</strong> with react adaptor, and I can't <strong>cache, tag, or revalidate</strong> anything since Filepond is using <code>XMLHttpRequest</code> to track the progress percentage, aborting and lots more which is impossible to do with <code>fetch</code>
here is how FilePond works:</p>
<pre class="lang-js prettyprint-override"><code>
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
const formData = new FormData();
formData.append(fieldName, file, file.name);

const request = new XMLHttpRequest();
request.open('POST', '/api/docs');

// Should call the progress method to update the progress to 100% before calling load
// Setting computable to false switches the loading indicator to infinite mode
request.upload.onprogress = (e) => {
progress(e.lengthComputable, e.loaded, e.total);
};

// Should call the load method when done and pass the returned server file id
// this server file id is then used later on when reverting or restoring a file
// so your server knows which file to return without exposing that info to the client
request.onload = function () {
if (request.status == 200) {
// the load method accepts either a string (id) or an object
load(request.responseText);
} else {
// Can call the error method if something is wrong, should exit after
error('oh no');
}
};

request.send(formData);

// Should expose an abort method so the request can be canceled
return {
abort: () => {
// This function is entered if the user has tapped the cancel button
request.abort();

// Let FilePond know the request has been canceled
abort();
},
};
},
</code></pre>
<p><em>you can read more in <a href="https://pqina.nl/filepond/docs/api/server/" rel="nofollow noreferrer">this link</a></em></p>
<p>and since nextjs didn't extended <strong>XMLHttpRequest</strong> like <strong>fetch()</strong>:</p>
<pre class="lang-js prettyprint-override"><code>await fetch("/api/docs", {
next: { tags: ['docs'] },
cache: 'force-cache'
});
</code></pre>
<p>I can't cache or tag it to revalidate it in my API route.
I am using nextjs version <code>14.2.3</code> right now and I know it's a feature that nextjs needs to add but I want to know if anyone solved it...</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top