canner cms

In this page, it explains some internal concepts of Canner. You can find the corresponding files in the source code.

TOC

• Components
  • Router
  • Form
  • Generator
• Hooks
  • useActionManager
• Hocs
• Actions
• Query

Actions

Every change of data in Canner such as create, update, delete becomes an action which is used to mutate and data and generate the GraphQL mutation string.

For example, now we have a data:

{
  posts: [{
    id: 'post1',
    title: 'Post1',
    content: 'Post1 is good.',
    categories: ['category1']
  }],
  categories: [{
    id: 'category1',
    name: 'Category1'
  }]
}

the following are some of actions we may have:

// action of create new post
{
  type: 'CREATE_ARRAY',
  payload: {
    key: 'posts',
    id: 'post2',
    value: {
      title: '',
      content: '',
      categories: []
    },
  }
}
// action of update the title of post1
{
  type: 'UPDATE_ARRAY',
  payload: {
    key: 'posts',
    id: 'post1',
    path: 'title'
    value: 'new title',
  }
}

Interface

export type UpdateType = 'create' | 'update' | 'delete' | 'swap' | 'connect' | 'disconnect';

export type ArrayActionType = 'UPDATE_ARRAY' | 'CREATE_ARRAY' | 'DELETE_ARRAY';
export type ConnectActionType = 'CONNECT' | 'DISCONNECT' | 'CREATE_AND_CONNECT' | 'DISCONNECT_AND_DELETE' | 'UPDATE_CONNECT';
export type ObjectActionType = 'UPDATE_OBJECT';
export type NoopType = 'NOOP';
export type ActionType = ArrayActionType | ConnectActionType | ObjectActionType | NoopType;

export type Action<T> = {
  type: T,
  payload: {
    key: string,
    id?: string,
    path?: string,
    value: any,
    relation?: Object,
    transformGqlPayload?: Function
  }
}

Mutate

Like Redux mutate state with the reducer function and the given action. We also has the reducer mutate function to mutate the data.

GraphQL Mutation

Besides mutating the data, action is also used to generate the GraphQL mutation string, since Canner is based on the GraphQL interface. The GraphQL Mutation string is only generated when the deploy function is called by a user.

ActionManager

An actionManager is used to manage the action and also merge the actions if it can.

ActionToMutation

Transform an action to a GraphQL mutation descriptor, and then we can use the objectToQueries function to transform it to GraphQL string.

ActionToVariables

Extract the variables from the aciton.

Query

Since Canner is based on GraphQL, its fetch and request are implemented by the GraphQL Query and Mutation. So, here are two cases we have to deal with, one is transforming Canner Schema to GraphQL Query and the other is transforming Action to GraphQL Mutation.

To transform the two kinds of object to GraphQL string, we define a GraphQL Descriptor which is a JSON, describing the GraphQL string, and easy to be transform to GraphQL string. If we want to transform an object to GraphQL string, we can just transform it to the GraphQL Descriptor. The interface of the GraphQL Descriptor is below:

type QueryObject = null | {
  fields?: {
    [string]: QueryObject
  },
  declareArgs?: {
    [string]: any,
  },
  args?: {
    [string]: any,
  },
  isPlural?: boolean,
  connection?: boolean,
  alias?: string
}