Does useSWR work with dynamic catch-all /pages/api/[...path].js routes?

[pramam]

Hello All,
I'm trying to use useSWR to fetch json5 data using a /pages/api/[...relativePath] dynamic route, to fetch data from a FS location by specifying a relative path. I URI encode/decode the path across the wire.
It is erroring out giving me a ENOENT File not found error on the server.

Note that I also have a /pages/api/metadata.js route that works with useSWR, and I can fetch a json5 file using a hardcoded path.

/data/static/provider/XYZ/*.json5(does not work) and /data/static/metadata.json5(works) is where my data is stored in my project.

==================== /pages/api/[...relativePath].js: ===========================
import * as JSON5 from 'json5'
import * as fs from "fs";
import path from 'path';

export default function relativePathHandler({ query: { relativePath } }, res) {

    const dir = path.resolve('./'); // ***** See comment below
    console.log(`/api/[...relativePath].js: dir: ${dir}`)

    //https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
    const subPath = decodeURI(relativePath.join('/'))

    const filePath = dir + '/' + subPath;
    console.log(`/api/[...relativePath].js: filePath: ${filePath}`)

    const raw = fs.readFileSync(filePath, "utf8");
------------------>It is picking up an absolute path, but I get ENOENT, file not found

    const metadata = JSON5.parse(raw);

    res.StatusCode = 200
    res.setHeader('Content-Type', 'application/json5')
    res.end(JSON.stringify(metadata))
}

*****I use path.resolve to get the absolute path of "./" on the server based on this article. I did not use this solution to get the location of the files on the file system.

====== /pages/provider.js =======
import useSWR from 'swr';
import JSON5 from 'json5'

const fetchJson5 = async (url) => {
    return JSON5.parse(await (await fetch(url)).text());
};


export default function Provider() {

    const epath = encodeURI('/api/data/static/provider/XYZ/tempmin.metadata.json5')
 
    console.log(`Provider: useSWR: encoded path: ${epath}`)
    const { data, error } = useSWR(epath, fetchJson5)
    if (error)
        return (
            <div>Provider Failed to Load {JSON.stringify(error)}</div>
        )
    if (!data)
        return (<div>Loading...</div>)

    return (
        <div>
            Provider Name:
            ${JSON.stringify(data)}
        </div>
    )
}

==================================================================
Error on the server: Functions:

[GET] /api/data/static/provider/XYZ/tempmin.metadata.json5
13:58:02:79
/api/[...relativePath].js: dir: /var/task
/api/[...relativePath].js: filePath: /var/task/data/static/provider/XYZ/tempmin.metadata.json5
2020-10-21T20:58:02.973Z	7376c40e-9267-4698-87ba-5922b567bf05	ERROR	Error: ENOENT: no such file or directory, open '/var/task/data/static/provider/XYZ/tempmin.metadata.json5'
    at Object.openSync (fs.js:462:3)
    at Object.readFileSync (fs.js:364:35)
    at relativePathHandler (/var/task/.next/serverless/pages/api/[...relativePath].js:234:62)
    at apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:8:7)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async module.exports.Q/3A.__webpack_exports__.default (/var/task/.next/serverless/pages/api/[...relativePath].js:380:11) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/var/task/data/static/provider/XYZ/tempmin.metadata.json5'
}

=================== /pages/api/metadata.js =====================

import * as fs from "fs";
import path from "path";

const dir = path.resolve('./');
const filePath = dir + "/data/static/metadata.json5";
console.log(`/api/metadata.js: filePath: ${filePath}`)


const raw = fs.readFileSync(filePath, "utf8");
-------> This works
const metadata = JSON5.parse(raw);


export default function handler(req, res) {
    res.StatusCode = 200
    res.setHeader('Content-Type', 'application/json5')
    res.end(JSON.stringify(metadata))
}

================== Caller of /api/metadata.js ======================
const { data, error } = useSWR('/api/metadata', fetchJson5)
------> This works!
====================Log from server from /pages/api/metadata.js:=====================

14:20:27:34
/api/metadata.js: filePath: /var/task/data/static/metadata.json5
-------> This works

What am I missing? I thought catch-all paths should be possible with SWR. It would be super elegant if this worked. I think my other option is to pass a query parameter with the relative path in useSWR('/api/alldata?path=/data/static/../etc', fetchJson5) instead of using dynamic routes.

Here's the vercel example that uses the dynamic route /pages/api/[id].js, that I am trying to mimic, but additionally using a catch-all route of ``[...id].js``` with useSWR.

Any advise would be greatly appreciated.
Thanks so much!

[pramam]

Note that the code above works on my local machine but does not work on the vercel deployment.

[sergiodxa]

I think this is not an SWR issue but a Vercel issue, most probably your files are not being copied to the deployment image after your app is built.

[pramam]

Thanks. I will contact vercel support. It is strange that one /data path worked but the other didn't.