@workflowgen/react-sdk NPM

WorkflowGen React SDK

WorkflowGen React SDK for React and React Native applications

Overview

@workflowgen/react-sdk is a library based on the @tanstack/react-query and graphql-request packages which exposes the WorkflowGen GraphQL API to help simplify the integration with React and React Native applications development.

How To Install

In your React or React Native project:

npm install @workflowgen/react-sdk @tanstack/react-query graphql-request graphql

or using yarn

yarn add @workflowgen/react-sdk @tanstack/react-query graphql-request graphql

Quickstart

In your main index.ts/.tsx or App component, import the required components and libraries.
Set your WorkflowGen GraphQL API URL and authorization.
Then wrap your code within the GraphQLClientProvider and QueryClientProvider components.

import React from 'react';
import { GraphQLClient } from 'graphql-request';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { GraphQLClientProvider } from '@workflowgen/react-sdk';
import MyView from './MyView';

export default function App() {
  const graphQLClient = new GraphQLClient('https://workflowgen/wfgen/graphql', {
    headers: {
      authorization: '...',
    },
  });

  const queryClient = new QueryClient();

  return (
    <GraphQLClientProvider client={graphQLClient}>
      <QueryClientProvider client={queryClient}>
        <MyView />
      </QueryClientProvider>
    </GraphQLClientProvider>
  );
}

Examples

React app: Retrieve a list of processes which I can launch

In MyView component:

import React from 'react';
import { useInfiniteMyLaunchableProcesses } from '@workflowgen/react-sdk';

export default function MyView() {
  const {
    processes,
    totalCount,
    isLoading,
    isSuccess,
    isFetchingNextPage,
    fetchNextPage,
    isError,
    error,
  } = useInfiniteMyLaunchableProcesses(undefined, {
    onSuccess: (data) => {
      console.log('onSuccess...');
    },
    onError: (error) => {
      console.log('onError:', error);
    },
    onSettled: (data, error) => {
      console.log('onSettled...');
    },
  });

  if (isLoading) {
    console.log('Loading...');
    return <p>Loading...</p>;
  }

  if (isError) {
    return <p>{`Error: ${error}`}</p>;
  }

  return (
    <>
      <h4>
        {processes?.length} of {totalCount} processes
      </h4>
      <ul>
        {processes?.map((item) => (
          <li key={item.id}>
            {item.description} v{item.version}
          </li>
        ))}
      </ul>
    </>
  );
}

For all useInfinite[...] hooks:

It always return a paginated list of items (Array) and a totalCount (Number).
By default, there can be 25 items per page. This can be changed via the variables.size parameter when calling the hook.
The getNextPageParam function is already defined inside the hook but you can still override it by passing your own function in the options parameter.

For more information about the additional parameters and data returned by our query hooks, refer to the useQuery and useInfiniteQuery hooks from the TanStack Query v4 documentation.

React app: Start a new request of a specific process

In MyView component:

import React, { useEffect } from 'react';
import { useCreateRequest } from '@workflowgen/react-sdk';

export default function MyView() {
  const {
    createRequest,
    request,
    isIdle,
    isLoading,
    isSuccess,
    isError,
    error,
  } = useCreateRequest({
    onMutate: (variables) => {
      console.log('onMutate...');
    },
    onSuccess: (data, variables, context) => {
      console.log('onSuccess...');
    },
    onError: (error, variables, context) => {
      console.log('onError:', error);
    },
    onSettled: (data, error, variables, context) => {
      console.log('onSettled...');
    },
  });

  useEffect(() => {
    const createRequestAsync = async () => {
      await createRequest({
        processName: 'PROCESS_NAME',
        processVersion: 1,
      });
    };
    createRequestAsync();
  }, [createRequest]);

  if (isIdle) {
    console.log('Idling...');
    return <p>Idling...</p>;
  }

  if (isLoading) {
    console.log('Loading...');
    return <p>Loading...</p>;
  }

  if (isError) {
    return <p>{`Error: ${error}`}</p>;
  }

  return (
    <>
      <h4>New request created !</h4>
      <ul>
        <li>Request #{request?.number}</li>
        <li>{request?.description}</li>
        <li>
          Status: {request?.status} - {request?.subStatus}
        </li>
        <li>
          By: {request?.requester.firstName} {request?.requester.lastName}
        </li>
        <li>Create on: {request?.openedAt}</li>
      </ul>
    </>
  );
}

For more information about the additional parameters and data returned by our mutation hooks, refer to the useMutation hook from the TanStack Query v4 documentation.