Skip to main content

JavaScript Output

Although the focus of gqless is to be used in TypeScript, it's completely possible to use it in JavaScript projects, outputting valid JavaScript code, alongside it's type-definitions, and using JSDoc to be able to use a typed gqless.

We recommend taking a look at Type Checking JavaScript files, allowJs and checkJs.

Configuration#

To enable JavaScript Output you have to especify an extra javascriptOutput property in your Configuration file, with some extra considerations:

/**
* @type {import("@gqless/cli").GqlessConfig}
*/
const config = {
// It should be set as 'true' or removed.
enumsAsStrings: true,
// You have to specify the '.js' extension
destination: './src/gqless/index.js',
// This has to be set as 'true'
javascriptOutput: true,
};
module.exports = config;

And the client will be created following the structure:

src/gqless
โ”œโ”€โ”€ schema.generated.d.ts # Generated schema, you shouldn't modify it manually
โ”œโ”€โ”€ schema.generated.js # Generated schema, you shouldn't modify it manually
โ””โ”€โ”€ index.js # gqless client is exported from here, you can safely modify it based on your needs

Usage#

The usage should be exactly the same:

import { query, resolved } from './gqless/index.js';
resolved(() => {
const dogsNames = query.dogs.map((dog) => {
return dog.name;
});
return {
type: query.time,
dogsNames,
};
})
.then((data) => {
console.log({
data,
});
})
.catch(console.error);

With the caveat that, even if the autocomplete might allow you to import the types, it will probably mean a runtime-error:

Javascript Output Type Error

To use the types, you have to use the JSDoc @type:

import { query, resolved } from '../gqless';
// ...
// Here user should be automatically typed
const user = await resolved((query) => {
const user = query.user({
id: '1',
});
user.id;
user.name;
return user;
});
function readUserData(
/**
* @type {import("./gqless").User}
*/
user
) {
// Here `user` will be typed
}
readUserData(user);
caution

For Node.js usage, if you don't have "type": "module" in your package.json, you might have to manually modify some imports to requires, since for now, outputting .mjs doesn't have much utility, since TypeScript doesn't support it yet

Last updated on by Sam Denty