How to configure JSON Server to support specific query string parameters?

Question

I checked the json server to add configuration: https://github.com/typicode/json-server/#add-custom-routes

Cause I would like to add the support for query string parameters in my application in the development environment.

routes.json:

{
    "/api/v1/*": "/$1",
}

/api-faked/db.json:

{
    "operations?code=": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
    "operations?code=adi": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
    "operations?code=adid": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
    "operations?code=adida": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
    "operations?code=adidas": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
    "operations?code=adidas1": [{"operationCode":"ADIDAS101"}],
    "operations?code=adidas10": [{"operationCode":"ADIDAS101"}],
    "operations?code=adidas101": [{"operationCode":"ADIDAS101"}],
    "operations?code=adidas9": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"}],
    "operations?code=adidas96": [{"operationCode":"ADIDAS96"}],
    "operations?code=adidas99": [{"operationCode":"ADIDAS99"}],
}

The application is run with:

{
  "name": "rm-combo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "concurrently -k \"json-server --watch api-faked/db.json --routes api-faked/routes.json --ro\" \"vue-cli-service serve\"",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  ...

when starting the application:

[1]  INFO  Starting development server...
[0]
[0]   \{^_^}/ hi!
[0]
[0]   Loading api-faked/db.json
[0]   Loading api-faked/routes.json
[0]   Done
[0]
[0]   Resources
[0]   http://localhost:3000/operations?code=
[0]   http://localhost:3000/operations?code=adi
[0]   http://localhost:3000/operations?code=adid
[0]   http://localhost:3000/operations?code=adida
[0]   http://localhost:3000/operations?code=adidas
[0]   http://localhost:3000/operations?code=adidas1
[0]   http://localhost:3000/operations?code=adidas10
[0]   http://localhost:3000/operations?code=adidas101
[0]   http://localhost:3000/operations?code=adidas9
[0]   http://localhost:3000/operations?code=adidas96
[0]   http://localhost:3000/operations?code=adidas99
...

The thing that is kinda weird is two folded, the resources above shows that there is no /api/v1/ segment in the resources generated by the JSON Server.

So obviously when I perform GET operations on the endpoints like:

http://localhost:3000/api/v1/operations?code= or http://localhost:3000/operations?code=adidas1 I am getting a 404.

But if I am adding to db.json:

"operations": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],

Then any GET request on /api/v1/operations?code=whatever will return (regardless of the code query string) will return the object given in operations in db/json.

How can I have a JSON server running which respects the query string configuration given in /api-faked/db.json, that is that:

/api/v1/operations?code=adidas101 and /api/v1/operations?code=adidas99 return two different results.

Solution

Managed to make it work with the configuration below:

routes.json

{
    "/api/v1/*": "/$1"
}

db.json

{
    "operations": [
        {
            "code": "empty",
            "operationCode": "EMPTY"
        },
        {
            "code": "adidas96",
            "operationCode": "ADIDAS96"
        },
        {
            "code": "adidas99",
            "operationCode": "ADIDAS99"
        },
        {
            "code": "adidas101",
            "operationCode": "ADIDAS101"
        },
        {
            "code": "vpe_ultima2",
            "operationCode": "VPE_ULTIMA2"
        }
    ],
    "stockaccountingdata": [
        {
            "operationId": "ADIDAS96",
            "codeStock":"STO61177",
            "companyName":"ICM (INTERNATIONAL)",
            "contractualTypology":"ACHAT/REVENTE",
            "vatCode":null
        },
        {
            "operationId": "ADIDAS99",
            "codeStock":"STO69084",
            "companyName":"ICM (INTERNATIONAL)",
            "contractualTypology":"ACHAT/REVENTE",
            "vatCode":null
        },
        {
            "operationId": "ADIDAS101",
            "codeStock":"STO73106",
            "companyName":"ICM (INTERNATIONAL)",
            "contractualTypology":"ACHAT/REVENTE",
            "vatCode":null
        },
        {
            "operationId": "ADIDAS101",
            "codeStock":"STO77162",
            "companyName":"ICM (INTERNATIONAL)",
            "contractualTypology":"ACHAT/REVENTE",
            "vatCode":null
        },
        {
            "operationId": "VPE_ULTIMA2",
            "codeStock":"STO73220",
            "companyName":"PPK",
            "contractualTypology":"EN MANDAT",
            "vatCode":"FR51442790366"
        }
    ],
    "virtualshipping": [
        {
            "operationId": "VPE_ULTIMA2",
            "operationCode":"VPE_ULTIMA2",
            "siteId":0,
            "createdOn":"0001-01-01T00:00:00"
        }
    ]
}

On the axios side in the TypeScript mutations code (ie. Vuex) code:

const isDevEnvironment = process.env.NODE_ENV && process.env.NODE_ENV === "development";
const operationsApiUrl = `${process.env.VUE_APP_API_URL}/v1/operations`;
const suggestionCount = 10;
const minLength = 3;

// See https://github.com/typicode/json-server/issues/530#issuecomment-512733522
function getOperationCodeParams(searchedOperationCode: string): AxiosRequestConfig {
    if (isDevEnvironment) {
        return {
            params: {
                code_like: searchedOperationCode,
            },
        };
    }
    return {
        params: {
            code: searchedOperationCode,
        },
    };
}

// [...]

async [Actions.fetchOperationCodeSuggestions]({ commit }, searchedOperationCode: string): Promise<void> {
        if (searchedOperationCode && searchedOperationCode.length >= minLength) {
            try {
                const url = `${operationsApiUrl}/`;
                const result = await axios.get<IOperationCode[]>(url, getOperationCodeParams(searchedOperationCode));
                const operationCodesFetched = result.data;
                const operationCodes = [...operationCodesFetched].map((o) => o.operationCode).sort().slice(0, suggestionCount);
                commit(Mutations.setOperationCodeSuggestions, operationCodes);
            } catch {
                commit(Mutations.setOperationCodeSuggestions, []);
            }
        } else {
            commit(Mutations.setOperationCodeSuggestions, []);
        }
    }