Context

In NocoBase, Context is the bridge connecting plugin code to NocoBase capabilities. Through the context, you can make requests, handle internationalization, write logs, navigate pages, and more.

There are two access entry points for the context:

• In Plugins: this.context
• In React components: useFlowContext() (imported from @nocobase/flow-engine)

Both return the same object (a FlowEngineContext instance), just used in different scenarios.

Usage in Plugins

In a plugin's lifecycle methods such as load(), access the context via this.context:

import { Plugin } from '@nocobase/client-v2';

class MyPlugin extends Plugin {
  async load() {
    // Access context capabilities via this.context
    const { api, logger } = this.context;

    const response = await api.request({ url: 'app:getInfo' });
    logger.info('App info', response.data);

    // Internationalization: this.t() auto-injects the plugin package name as namespace
    console.log(this.t('Hello'));
  }
}

Usage in Components

In React components, get the same context object via useFlowContext():

import { useFlowContext } from '@nocobase/flow-engine';

export default function MyPage() {
  const ctx = useFlowContext();

  const handleClick = async () => {
    const response = await ctx.api.request({ url: 'users:list', method: 'get' });
    console.log(response.data);
  };

  return <button onClick={handleClick}>{ctx.t('Load data')}</button>;
}

Plugin Shorthand Properties vs ctx Properties

The Plugin class provides some shorthand properties for convenient use in load(). However, note that some Plugin class shorthand properties and ctx properties with the same name point to different things:

The most commonly confused pair is this.router and ctx.router:

• this.router (Plugin shorthand property) -> RouterManager, used to register routes (.add())
• ctx.router (context property) -> React Router instance, used for page navigation (.navigate())

// In Plugin: register routes
async load() {
  this.router.add('hello', {
    path: '/hello',
    componentLoader: () => import('./pages/HelloPage'),
  });
}

// In component: page navigation
const ctx = useFlowContext();
ctx.router.navigate('/hello'); // -> /v/hello

Common Capabilities Provided by Context

Here is a list of common context capabilities. Note that some are only available in Plugins, some only in components, and some in both but with different syntax.

For detailed usage and code examples of each capability, see Common Capabilities.

Related Links

• Common Capabilities -- Detailed usage of ctx.api, ctx.t, ctx.logger, etc.
• Plugin -- Plugin entry point and shorthand properties
• Component Development -- Basic usage of useFlowContext in components