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
orApp
component, import the required components and libraries. - Set your WorkflowGen GraphQL API URL and authorization.
- Then wrap your code within the
GraphQLClientProvider
andQueryClientProvider
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 theoptions
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.
Hooks
License
This SDK is distributed under the MIT License, see LICENSE for more information.