website·Indexed 30 days ago
https://openapi-qraft.github.io/openapi-qraftSearchable website documentation for Openapi Qraft Github from https://openapi-qraft.github.io/openapi-qraft.
/app directory./app directory./app directory.create-predefined-parameters-request-fn.ts file, use the --operation-predefined-parameters option when running the @openapi-qraft/cli. This utility allows you to create a custom requestFn that automatically injects predefined parameters into specified API operations.npx openapi-qraft ... --operation-predefined-parameters '\/**:header.x-monite-version' 'get /**,!/auth/**:header.x-monite-entity-id'qraft openapi command uses a plugin system to determine what code is generated. Plugins are specified using the --plugin <name> option. Multiple plugins can be used simultaneously. By default, the tanstack-query-react plugin is used if none are specified.# Generate Qraft Services and openapi-typescript types
qraft openapi --plugin tanstack-query-react --plugin openapi-typescript
# Generate Qraft Services only
qraft openapi --plugin tanstack-query-react
# Generate openapi-typescript types only
qraft openapi --plugin openapi-typescriptQraftSecureRequestFn to handle the lifecycle of a Bearer token. By providing a security scheme handler, you can define how to obtain a new token and how to refresh an existing one. The resulting secureRequestFn automatically injects the Authorization: Bearer <token> header into requests that require the specified security scheme.import { ReactNode } from 'react';
import { requestFn, QraftContext } from '@openapi-qraft/react';
import { QraftSecureRequestFn } from '@openapi-qraft/react/Unstable_QraftSecureRequestFn';
import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI
const qraft = createAPIClient();
const App = ({ children }: { children: ReactNode }) => {
return (
<QraftSecureRequestFn
requestFn={requestFn}
securitySchemes={{
// 'clientToken' matches the security scheme name in your OpenAPI spec
clientToken: async ({ isRefreshing }) => {
if (!isRefreshing) {
const { access_token } = await qraft.auth.obtainToken({
body: { grant_type: 'client_credentials' },
}, requestFn);
return access_token;
}
const { access_token } = await qraft.auth.refreshToken({
body: { grant_type: 'client_credentials' },
}, requestFn);
return access_token;
}
}}
>
{(secureRequestFn) => (
<QraftContext.Provider value={{ requestFn: secureRequestFn }}>
{children}
</QraftContext.Provider>
)}
</QraftSecureRequestFn>
);
};
export default App;<Services, Callbacks> have been removed from qraftAPIClient function calls. Types are now automatically inferred from the arguments, simplifying the API and improving type inference.// Before v2.6.0
const api = qraftAPIClient<Services, Callbacks>(services, callbacks, options);
// After v2.6.0
const api = qraftAPIClient(services, callbacks, options);useIsMutating to track both a specific document upload (filtered by entity_id) and the total number of document uploads occurring across the application.import { createAPIClient } from './api';
import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
const api = createAPIClient({
requestFn,
queryClient,
baseUrl: 'https://api.sandbox.monite.com/v1',
});
function DocumentsUploadStatus() {
// Track mutation for a specific entity
const creatingDocument = api.entities.postEntitiesIdDocuments.useIsMutating({
parameters: {
path: {
entity_id: '1',
},
}
});
// Track all mutations for this operation
const creatingDocumentTotal = api.entities.postEntitiesIdDocuments.useIsMutating();
return (
<>
{!!creatingDocumentTotal && <div>Number of creating documents: {creatingDocumentTotal}...</div>}
{!!creatingDocument && <div>Creating document...</div>}
</>
);
}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<DocumentsUploadStatus />
</QueryClientProvider>
);
}package.json.{
"devDependencies": {
"@qraft/cli": "latest",
"@openapi-qraft/openapi-typescript-plugin": "latest",
"@openapi-qraft/tanstack-query-react-plugin": "latest"
},
"scripts": {
"generate-client": "qraft openapi --plugin tanstack-query-react --plugin openapi-typescript https://raw.githubusercontent.com/swagger-api/swagger-petstore/master/src/main/resources/openapi.yaml --output-dir src/api"
}
}import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI
const qraft = createAPIClient();
function FetchStatus() {
// Checks all queries for `GET /entities`
const fetchingTotal = qraft.entities.getEntities.useIsFetching();
// Checks all queries for `GET /entities/3e3e-3e3e-3e3e` with a specific header
const specificQueryKeyTotal = qraft.entities.getEntities.useIsFetching({
infinite: false,
parameters: {
header: {
'x-monite-version': '2023-09-01',
},
path: {
entity_id: '3e3e-3e3e-3e3e',
},
},
});
return (
<>
{!!fetchingTotal && <div>Number of queries: {fetchingTotal}...</div>}
{!!specificQueryKeyTotal && <div>Loading specific query...</div>}
</>
);
}useSuspenseQueries hook allows you to execute multiple asynchronous data fetching operations concurrently with built-in support for React Suspense. It is functionally similar to useQueries but integrates with Suspense for loading states. The hook is accessed via the generated API client using the pattern: qraft.<service>.<operation>.useSuspenseQueries(options, queryClient).const result = qraft.<service>.<operation>.useSuspenseQueries(
options,
queryClient
)