Comment passer de la metadata lors des transitions

9 min

Cette fonctionnalité est disponible à partir de la version de l'OIP Core 2.9.0

Comment passer de la metadata lors des transitions

Ce guide a pour but d'expliquer l'implémentation pour gérer le paramètre object qui peut être passé aux controllers processAction et goto exposés par l'OIP Core.

Ce paramètre permet de passer de la metadata lors des appels aux controllers de transitions.

object est alors enregistré dans le process en base de données.

Editer les types graphQL côté server

Éditer le fichier server/graphql/input/ProcessObjectInput.mjs qui définit l'input GraphQL de object qui sera passé aux mutations responsables des transitions selon vos besoins.

import { gql } from 'apollo-server-express';

const ProcessObjectInput = {
  typeDefs: gql`
    input ProcessObjectInput {
      message: String
    }
  `
};

export default ProcessObjectInput;

Editer le fichier server/graphql/type/ProcessType.mjs qui définit le type graphQL de l'objet process

import * as R from 'ramda';
import { gql } from 'apollo-server-express';

const ProcessType = {
  typeDefs: gql`
    # définition du type 'ProcessObject'
    type ProcessObject {
      message: String
    }

    type ProcessContext {
      projectId: ID
      viewId: ID
      actions: [ID]
      object: ProcessObject   # ajout du field 'object'
    }

    ...
    
  `,
  resolvers: {
    Process: {
      id: R.prop('_id'),
      context: R.applySpec({
        projectId: R.propOr(null, 'projectId'),
        viewId: R.prop('viewId'),
        actions: R.prop('actions'),
        object: R.prop('object')   // résolution de `object`
      })
    }
  }
};

export default ProcessType;

Editer le fichier server/graphql/type/MutationType.mjs qui définit le type GraphQL des mutations

import { ProcessResolver } from '../resolver/index.mjs';

import { gql } from 'apollo-server-express';

const MutationType = {
  typeDefs: gql`
    
    ...

    type Mutation {
      # ajout de 'object' de type 'ProcessObjectInput' en argument de la mutation 'processAction'
      processAction(viewId: ID!, action: ID!, object: ProcessObjectInput): ProcessActionMutationResponse
      
      processRunTask(projectId: ID!, taskName: ID!): ProcessRunTaskMutationResponse
      killCronTask(taskName: String!): KillCronTaskMutationResponse
    }
  `,
  resolvers: {
    Mutation: {
      processAction: (parent, {
        viewId,
        action,
        object  // ajout de l'argument 'object'
      }, context) => ProcessResolver(context).action({
        viewId,
        action,
        object  // ajout du paramètre 'object'
      }),
      processRunTask: (parent, { projectId, taskName }, context) => ProcessResolver(context).runTask({ projectId, taskName }),
      killCronTask: (parent, { taskName }, context) => ProcessResolver(context).killCronTask({ taskName })
    }
  }
};

export default MutationType;

Éditer le fichier server/graphql/resolver/ProcessResolver.mjs pour gérer le paramètre object lors de la résolution de la mutation processAction

const ProcessResolver = ({ process, sessionId }) => (() => {
  
  ...
  
  const action = async ({
    viewId,
    action,
    object  // ajout du paramètre 'object'
  }) => {
    logger.info(`[ProcessResolver][action] info: ${JSON.stringify({
      sessionId,
      projectId: process.projectId,
      viewId,
      action
    })}`);

    try {
      const updatedProcess = await actionCtrl({
        sessionId,
        projectId: process.projectId,
        viewId,
        action,
        object   // ajout du paramètre 'object'
      });
      return OK({ process: updatedProcess });
    } catch (err) {
      return KO(err);
    }
  };
  
  ...
  
})();

export default ProcessResolver;

Éditer la mutation processAction côté client

Éditer le fichier app/_graphql/mutations/ProcessActionMutation.js pour ajouter l'input object en argument de la mutation et object en field attendu :

import {
  commitMutation,
  graphql
} from 'react-relay';

const mutation = graphql`
  mutation ProcessActionMutation($viewId: ID!, $action: ID!, $object: ProcessObjectInput) {
    processAction(viewId: $viewId, action: $action, object: $object) {
      ok
      error
      process {
        id
        context {
          projectId
          viewId
          actions
          object {
            message
          }
        }
      }
    }
  }
`;

export default (environment, { viewId, action, object }, done) => {
  const variables = { viewId, action, object };

  commitMutation(
    environment,
    {
      mutation,
      variables,
      updater: (store) => { },
      optimisticUpdater: () => {
      },
      onCompleted: (response) => {
        const { ok, error, process } = response.processAction;
        done(ok, error, process);
      },
      onError: err => console.error(err)
    }
  );
};

Éditer Process.jsx

Éditer le fichier app/Process.jsx pour gérer le paramètre object lors des appels aux méthodes responsables des transitions côté client :

const Process = ({ children }) => {

  ...

  const onAction = (viewId, action, object) => {
    ProcessActionMutation(
      environment,
      {
        viewId,
        action,
        object,
      },
      (ok, error, process) => {
        setProcess(process);
      }
    );
  };

  const onNext = (viewId, object) => {
    ProcessActionMutation(
      environment,
      {
        viewId,
        action: '_NEXT_',
        object,
      },
      (ok, error, process) => {
        setProcess(process);
      }
    );
  };

  const onBack = (viewId, object) => {
    ProcessActionMutation(
      environment,
      {
        viewId,
        action: '_BACK_',
        object,
      },
      (ok, error, process) => {
        setProcess(process);
      }
    );
  };
  
  ...
  
};

export default Process;

Dans les composants des vues

Dans les composants des vues il est alors possible de passer un paramètre object de type définit par le fichier server/graphql/input/ProcessObjectInput.mjs pour passer de la metadata lors des appels aux méthodes responsables des transitions.

import withProcess, { actionIds, viewIds } from '@@app/withProcess';

const Home = ({ context, processHandlers }) => {

  ...

  const $onClick = (actionId) => () => {
    processHandlers.onAction(viewIds.HOME, actionId, { message: 'hello world!' });
  };

  return (
    <div className='t-home'>
      <h2>{viewIds.HOME}</h2>
      
      ...
    
      <button className='f-button' onClick={$onClick(actionIds.HOME_NEXT)}>
        NEXT
      </button>
    </div>
  );
};

export default withProcess(Home);

Dans l'exemple ci-dessus, on passe en troisième paramètre à la méthode onAction exposée par processHandlers un objet contenant { message: 'hello world!' }

Cet objet sera alors enregistré en base de données dans le process relatif lors de la prochaine transition.