Skip to content

Expose TypeScript Types to Users and Improve node Docs #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 21, 2025

Conversation

femioladipo
Copy link
Contributor

@femioladipo femioladipo commented Aug 3, 2025

Description

This PR enables proper TypeScript support and facilitates importing specific functions via the /node subpath export. The changes ensure that existing TypeScript types are properly published and consumers can import functions like jsonSchemaBuilder using import { jsonSchemaBuilder } from 'json-graphql-server/node'.

Changes Made

package.json

What:

"exports": {
    ".": {
+        "types": "./dist/client.d.ts",
        "import": "./dist/json-graphql-server.js",
        "require": "./dist/json-graphql-server.cjs"
    },
    "./node": {
+        "types": "./dist/node.d.ts",
        "import": "./dist/json-graphql-server-node.js",
        "require": "./dist/json-graphql-server-node.cjs"
    }
}

Why:

  • Added "types" field to both main and /node exports to provide TypeScript declaration files to users

What:

"build": "yarn build-esm-cjs && yarn build-node && yarn build-umd && yarn build-ts",

Why:

  • Moved build-ts to the end of the build chain because yarn build-esm-cjs removes all files in /dist so anything emitted to /dist before yarn build-esm-cjs is removed.

tsconfig.json

What:

        "moduleDetection": "force",
+       "emitDeclarationOnly": true,
+       "declaration": true,
+       "declarationMap": true,
+       "outDir": "./dist",

Why:

  • "emitDeclarationOnly": true: Generates only .d.ts files without JavaScript output (since Vite handles JS bundling)
  • "declaration": true: Enables generation of TypeScript declaration files
  • "declarationMap": true: Creates source maps for declaration files for better debugging
  • "outDir": "./dist": Specifies output directory for generated declaration files

vite.config.ts

What:

fileName: 'json-graphql-server',

Why:

  • Explicitly sets the output filename to match the expected package name as in vite.config.umd.ts, rather than in inferring implicitly.

📝 README.md

What:

// Before: import {jsonSchemaBuilder} from 'json-graphql-server';
// After:  import {jsonSchemaBuilder} from 'json-graphql-server/node';

Why:

  • Updated documentation to state the correct import path for node

This PR addresses the core issue of making existing TypeScript types available to consumers while providing a cleaner import API for the schema builder functionality.

Related Issue

Open issue requesting typescript support

@femioladipo femioladipo changed the title Enable TypeScript exports and improve module imports Enable TypeScript Type exports and improve module imports Aug 3, 2025
@femioladipo femioladipo changed the title Enable TypeScript Type exports and improve module imports Enable TypeScript Type exports and improve node docs Aug 3, 2025
@femioladipo femioladipo changed the title Enable TypeScript Type exports and improve node docs Expose TypeScript Types to Users and improve node docs Aug 4, 2025
@femioladipo femioladipo changed the title Expose TypeScript Types to Users and improve node docs [RFR] Expose TypeScript Types to Users and Improve node Docs Aug 8, 2025
Copy link
Collaborator

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR!

Most changes look good!

However, I'm unable to confirm this allows to properly access the TS types when using in a Node application:

Screenshot_20250818_111726

Did you try it? Can you confirm if it works or not and add testing instructions?
Thanks

@femioladipo
Copy link
Contributor Author

Thank you for the PR!

Most changes look good!

However, I'm unable to confirm this allows to properly access the TS types when using in a Node application:
Screenshot_20250818_111726

Did you try it? Can you confirm if it works or not and add testing instructions? Thanks

Hi, thanks for the review.

I just re-checked and the types should be showing up in the case you created:
image

I've added a demo to the example directory for you to confirm. I also ensured the demo is using the local version of json-graphql-server to ensure it's always up to date.

@femioladipo
Copy link
Contributor Author

Let me know if it's working as expected, plus additionally if you'd like me to remove the changes to the example directory from the PR.

@slax57
Copy link
Collaborator

slax57 commented Aug 19, 2025

@femioladipo Thanks for your reply.
I confirm the types are correct in the example you added.
However, when testing outside the repository (this was my initial test), I still have the same issue.
I tried both using a local path dependency ("json-graphql-server": "../json-graphql-server") and manually copying the whole folder (after building the package of course) to node_modules/json-graphql-server, in both cases restarted my TS server, but still no luck.
Do you manage to get it working in a test project outside the repo?
Thanks

@femioladipo
Copy link
Contributor Author

femioladipo commented Aug 20, 2025

Hi @slax57, yes that too is working for me. In fact it's how I currently have it setup in my project. I vendor'd this PR as a package within my repo and then use a local/path install to link to it. I'm not sure why your setup isn't picking up the types.

I also rechecked just now with a minimal setup using just two files in a directory, pasted below. I also setup a temporary repo you can checkout: https://github.com/femioladipo/json-graphql-server-test. Can you check one or both of these? Apologies, if this is a bit laborious, but I feel the issue may be in your setup. While I am really curious what it might be.

server.ts

import express from 'express';
import jsonGraphqlExpress, { getPlainSchema } from 'json-graphql-server/node';

const data = {
  users: [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
    { id: 3, name: 'Alice Johnson', age: 28 },
  ],
  posts: [
    { id: 1, title: 'GraphQL Basics', content: 'Introduction to GraphQL', authorId: 1 },
    { id: 2, title: 'Advanced GraphQL', content: 'Deep dive into GraphQL features', authorId: 2 },
    { id: 3, title: 'GraphQL Best Practices', content: 'Tips and tricks for using GraphQL effectively', authorId: 3 },
  ],
};

const PORT = 3000;
const app = express();

const plainSchema = getPlainSchema(data);

app.use('/graphql', jsonGraphqlExpress(data));
app.listen(PORT);

package.json

{
  "dependencies": {
    "express": "^5.1.0",
    "json-graphql-server": "./vendor/json-graphql-server"
  }
}

@slax57
Copy link
Collaborator

slax57 commented Aug 21, 2025

Thanks @femioladipo for taking the time to provide additional tests and information.
I compared both projects and realized yours did not include a tsconfig.json file.
I had one in my project because I initialized it using tsc.

Anyways, I found the culprit: I was missing the "moduleResolution": "bundler" setting.

Now the types are properly working so we can consider this issue solved.
Thanks again for your contribution and for your time!

@slax57 slax57 added this to the 3.2.2 milestone Aug 21, 2025
@slax57 slax57 merged commit cb28fe7 into marmelab:master Aug 21, 2025
1 check passed
@slax57 slax57 mentioned this pull request Aug 21, 2025
@slax57 slax57 changed the title [RFR] Expose TypeScript Types to Users and Improve node Docs Expose TypeScript Types to Users and Improve node Docs Aug 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants