Code Component API Reference

zvm-code-context provides APIs bound to the host project context for code components. Developers can use these APIs to implement required features more conveniently.

Import


import { useAppContext } from 'zvm-code-context';
 
const ctx = useAppContext();

API List

Jump to a specified page in the host project, with optional parameters. This is the recommended way to navigate to ensure specific jump logic is executed.


// Navigate to /user/123 with parameter id=123
ctx.navigate('/user/123', { params: { id: 123 } });

2. query (GraphQL Request)

Make a GraphQL request to the host project’s backend.


import userListQuery from './graphql/userListQuery.gql';
 
// Execute query
const res = await ctx.query(userListQuery.loc.source.body, { page: 1 });
const users = res?.data?.userList;

Initiate a subscription request to the host project’s backend to listen for data changes.


ctx.subscribe(
  `subscription get_test($where: test_bool_exp!) {
    test(where: $where, limit: 1) {
      id
      name
    }
  }`,
  { where: { id: { _eq: 1 } } },
  (data) => {
    console.log('Received real-time update data:', data);
  }
);

4. globalData (Global Variables)

Access global variables defined in the current host environment (e.g., current user info, theme configuration).


const theme = ctx.globalData.theme;
const currentUser = ctx.globalData.currentUser;

5. pageData (Page Variables)

Access page variables of the currently running page in the host project.


const pageVars = ctx.pageData;

6. component (Deprecated)

Contains all data information describing the current component instance in the host project.


const componentInfo = ctx.component;

7. discover (Deprecated)

Get a specific component instance in the host project by component ID.


ctx.discover("component_id");