JavaScript Output#

Although the focus of GQty 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 GQty.

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("@gqty/cli").GQtyConfig}
 */
const config = {
  // It should be set as 'true' or removed.
  enumsAsStrings: true,

  // You have to specify the '.js' extension
  destination: './src/gqty/index.js',

  // This has to be set as 'true'
  javascriptOutput: true,
};

module.exports = config;

And the client will be created following the structure:

src/gqty
├── 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 # gqty 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 './gqty/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 '../gqty';

// ...

// 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("./gqty").User}
   */
  user
) {
  // Here `user` will be typed
}

readUserData(user);

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