Static files can't be loaded with useAwait caching

[samevision]

Hello guys,

since I work with Javascript since 2 months only it's not that easy to build my app. I recently integrated this plugin as mentioned in the readme.

app.js

const redis = require('ioredis')({ host: '127.0.0.1' })
const abcache = require('abstract-cache')({
  useAwait: true,
  driver: {
    name: 'abstract-cache-redis',
    options: { client: redis }
  }
})
fastify.register(require('fastify-redis'), { client: redis })
const fastifyCaching = require('fastify-caching')
fastify.register(fastifyCaching, {
  cache: abcache
})

fastify.register(require('point-of-view'), {
  engine: {
    pug: require('pug')
  },
  templates: path.join(__dirname, './', 'views')
})

fastify.register(require('fastify-static'), {
  root: path.join(__dirname, 'public')
})

I activated "useAwait", but that's the whole problem right now. If useAwait is false everything works fine. If useAwait is true the page loads only if I request the url twice. This is related to the css, js and media files from my static folder. If I remove all static files or if I disable cache in my browser the page will be loaded normally.

The files are on pending:
Screenshot

Any ideas how to fix this?

Best

[jsumners]

abstract-cache-redis requires useAwait: true. It does not implement the callback style interface.

Are you sure you need this plugin? I don't see anything in your example that is using the cache provided by this plugin.

[samevision]

Thanks for your response. I try to cache some data until it changes. The simple integration works fine:

await this.cache.set("test", {hello: "world"}, 5000)
const data = await this.cache.get("test")
res.send(data.item)

I want to use this await structure but this breaks my static files. How is the useAwait option related to these files?

[jsumners]

I recommend not using JS to serve static files -- https://github.com/fastify/fastify/blob/14b4e02d3648355987568eccf328a7111558c1b2/docs/Recommendations.md#reverseproxy

[samevision]

So the plugin fastify-static is for development only? Is there a way to use it anyway or do I have to work with a reverse proxy?

[jsumners]

So the plugin fastify-static is for development only?

I did not say that.

Is there a way to use it anyway

I cannot tell you how to setup fastify-static, nor how it would conflict with this one (if at all), as I have not used that plugin.

or do I have to work with a reverse proxy?

You can do as you like, but I highly recommend reading the document I linked, and those it links, along with researching why a reverse proxy is a good practice in general.

[samevision]

Thank you for your help! In production I already use an apache server with reverse proxy. So it was really easy to serve the static files there. Everything works perfectly there.

Now I have to figure out how to serve them locally in development without fastify-static.

[jsumners]

If you can provide a bare minimum reproduction of the error, that would go a long way to helping others help you.

[samevision]

What is the error?
Static files are pending forever.

When does the error appear?
Load static files with fastify-static and activate useAwait with fastify-caching.

I think that's it. After serving the static files with reverse proxy it works as it is supposed to be. So I am pretty sure fastify-static is the problem here.

[jsumners]

What is the error?
Static files are pending forever.

When does the error appear?
Load static files with fastify-static and activate useAwait with fastify-caching.

I think that's it. After serving the static files with reverse proxy it works as it is supposed to be. So I am pretty sure fastify-static is the problem here.

We cannot node index.js this. A reproduction is something we can run locally on our machines with minimal effort.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.