context(ctx, routeInfo)

The context() plugin type can be used to add arbitrary JSON content to the template rendering context. When @wq/router renders a page, it generates a default context with basic route info, then adds any context supplied by @wq/app, then finally runs each context() plugin in the order registered to determine the final context. This context then becomes the payload to @wq/router’s RENDER Redux action. You can access the current render context in any component via the useRenderContext() hook.

The render context is left over from wq’s legacy Mustache-based renderer, and is only updated once per navigation. In many cases it is preferable to use other React hooks instead. For example, useModel() provides a live view into the local data store that will automatically re-render if the store changes. That said, there are cases where a context plugin is more useful, such as setting the default values for form fields.

The context() function should accept up to two arguments, ctx and routeInfo. ctx includes the context from all previously processed context plugins. The routeInfo argument (also available as ctx.router_info) provides detailed information about the current route, as defined by @wq/router and @wq/app. context() should return one of the following:

• null / undefined (if no additional context was found to be needed),
• an object with additional properties to be added to the existing context, or
• a Promise that resolves to such an object

For example, suppose you wanted to add an autogenerated timestamp to a model. You could use Django’s auto_now_add property, but suppose you are often working offline and want to ensure that the timestamp reflects the time the form was initially opened, rather than the time it was synced. You could do this by defining a context plugin as follows.

// app/js/datePlugin.js
const datePlugin = {
    context(ctx, routeInfo) {
        if (routeInfo.name === "survey_edit:new") {
            return {
                "timestamp": new Date()
            };
        }
    }
};

// app/js/data/config.js
const config = {
    pages: {
        survey: {
            url: 'surveys',
            verbose_name: 'survey',
            verbose_name_plural: 'surveys',
            list: true,
            form: [
                {
                    name: 'name',
                    type: 'string',
                    label: 'Name',
                    bind: {
                        required: true,
                    }
                },
                {
                    name: 'timestamp',
                    type: 'dateTime',
                    label: 'Timestamp',
                    disabled: true,
                    bind: {
                        required: true,
                    }
                },
            ],
        },
    }
}

// src/index.js
import wq from './wq.js';

wq.use(datePlugin);
wq.init(config).then(...);

// navigate to surveys/new

In the above example, the timestamp field is also disabled in the UI. To do this, you can customize wq_field_config on the serializer - perhaps by setting control.appearance to “hidden”, or by adding disabled: true as in this example.

from wq.db.rest.serializers import ModelSerializer
from .models import Survey

class SurveySerializer(ModelSerializer):
    class Meta:
        model = Survey
        fields = '__all__'
        wq_field_config = {
            'timestamp': { 'disabled': True }
        }