Usage
Advanced Usage
Learn how to build a wrapper around the JS SDK package.
Custom Wrapper Example
The following example demonstrates how to build a custom wrapper for buildCraftQueryUrl() in Vue.
This wrapper, useCraftUrlBuilder, adds custom methods and handles URLs more flexibly.
useCraftUrlBuilder.ts
import { buildCraftQueryUrl } from '@query-api/js';
import type { ElementType, ExecutionMethod } from '@query-api/js';
export function useCraftUrlBuilder<T extends ElementType>(elementType: T) {
const queryBuilder = buildCraftQueryUrl(elementType); // Initialize the core builder
const baseUrl = '' // primary site url of your craft system
const debug = false
return {
...queryBuilder,
// Custom method to build the full URL
buildUrl(execOpt: ExecutionMethod) {
const queryUrl = queryBuilder.buildBaseUrl(execOpt);
const url = `${baseUrl}${queryUrl}`;
if (debug) {
console.log('The built URL is: ' + url);
}
return url;
},
};
}
Explanation
queryBuilder: UsesbuildCraftQueryUrl()to initialize the core query builder.baseUrlanddebug: These values should come from a global config or env file.buildUrl(execOpt: ExecutionMethod): Extends the base query builder with abuildUrlmethod, which generates the full URL by appendingbaseUrland, ifdebugis enabled, logs the URL to the console.