Passing array in query via axios in marshmallow-code webargs

Explanation of the problem

The issue at hand is a discrepancy between the expected behavior of a GET request using Axios to a Flask-Smorest endpoint, and the actual behavior that is observed. The request’s querystring is supposed to contain an array, which Axios sends in the following format:

http://127.0.0.1:5000/api/v1/items/?types[]=cd&types[]=dvd

The endpoint has a defined schema for reading the arguments, which is declared as follows:

class FilterSchema(ma.Schema):
    ...
    types = ma.fields.List(ma.fields.String(), missing=[])

However, when the data is received in the endpoint, the types argument is empty, as seen in the following code block:

@items_blp.route('/')
class ItemCollection(MethodView):
    @items_blp.arguments(FilterSchema(unknown=ma.EXCLUDE), location="query")
    @listings_blp.response(ItemSchema(many=True))
    def get(self, payload):
        # payload['types'] is empty...
        if payload['types']:
            qs = Item.objects.filter(item_type__in=payload['types'])
        return qs

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Passing array in query via axios in marshmallow-code webargs

pip install webargs

2. Modify the endpoint definition to include webargs in the parsing of the query string:

from webargs import fields
from webargs.flaskparser import use_args

args = {
    'types': fields.List(fields.String(), required=False, missing=[])
}

@items_blp.route('/')
class ItemCollection(MethodView):
    @items_blp.arguments(FilterSchema(unknown=ma.EXCLUDE), location="query")
    @use_args(args)
    @listings_blp.response(ItemSchema(many=True))
    def get(self, payload):
        if payload['types']:
            qs = Item.objects.filter(item_type__in=payload['types'])
        return qs

3. Change the axios request to correctly format the array in the query string:

axios.get(`http://127.0.0.1:5000/api/v1/items/?types=${types.join('&types=')}`)

Other popular problems with marshmallow-code webargs

A brief introduction to marshmallow-code webargs

Marshmallow-webargs is a library for parsing and validating request arguments in Flask-based web applications. It provides a simple and flexible way to handle request arguments, including query parameters, JSON bodies, and form data. The library is built on top of the Marshmallow library, which provides the core functionality for serialization and validation of data.

One of the key benefits of using marshmallow-webargs is the ability to define request argument validation as part of the schema. This schema can be defined using the Marshmallow library, and it provides a clear and concise way to specify the type, format, and constraints of request arguments. The marshmallow-webargs library then uses this schema to parse and validate the request arguments, returning a Python data structure that can be used directly in the application logic. This approach reduces the amount of code required to handle request arguments, making it easier to write and maintain the application.

Most popular use cases for marshmallow-code webargs

1. Parsing and Validating Request Arguments: Marshmallow-webargs can be used to parse and validate request arguments in Flask-based web applications. The library provides a simple and flexible way to handle query parameters, JSON bodies, and form data, and it integrates with the Marshmallow library for serialization and validation. This makes it easy to define and enforce the constraints on the request arguments, reducing the risk of incorrect data being processed.
2. Reducing Boilerplate Code: Marshmallow-webargs helps to reduce the amount of boilerplate code required to handle request arguments. By integrating with the Marshmallow library, it provides a simple and concise way to define the format and constraints of request arguments, eliminating the need to write custom parsing and validation code. This makes it easier to write and maintain the application, and it reduces the risk of introducing bugs into the code.
3. Example Usage:

from flask import Flask
from webargs import FlaskParser
from webargs.flaskparser import use_args

app = Flask(__name__)
parser = FlaskParser()

# Define a schema using marshmallow
class ItemSchema(ma.Schema):
    name = ma.fields.Str(required=True)
    quantity = ma.fields.Int(required=True)

# Use the schema in a view function
@app.route("/items/", methods=["POST"])
@use_args(ItemSchema(), location="json")
def add_item(args):
    # `args` will be a Python data structure
    # based on the defined schema
    return {"message": "Item added", "data": args}, 201

In this example, the ItemSchema is defined using the Marshmallow library, and it is used to parse and validate request arguments in a Flask view function. The use_args decorator is used to specify the schema and the location of the request arguments, and the args parameter of the view function is automatically populated with the parsed and validated data.