Skip to content

Add solid-urql and solidstart-urql generators#1350

Open
davedbase wants to merge 7 commits intodotansimha:mainfrom
davedbase:main
Open

Add solid-urql and solidstart-urql generators#1350
davedbase wants to merge 7 commits intodotansimha:mainfrom
davedbase:main

Conversation

@davedbase
Copy link

@davedbase davedbase commented Jan 25, 2026

Description

This PR adds two new GraphQL Code Generator plugins for the SolidJS ecosystem:

  1. @graphql-codegen/typescript-solid-urql - Generates typed SolidJS URQL hooks (createQuery, createMutation, createSubscription) for GraphQL operations
  2. @graphql-codegen/typescript-solidstart-urql - Generates typed SolidStart URQL query primitives and mutation actions for server-side rendering with SolidStart

These plugins follow the same patterns as the existing React and Vue URQL plugins, but are tailored for SolidJS's reactive primitives. They enable developers using SolidJS/SolidStart with URQL to get full TypeScript type safety for their GraphQL operations.

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

Screenshots/Sandbox (if appropriate/relevant):

Example generated code for a query:

solid-urql:

// Example of generated code
export const useCreateGetUser = (args: Omit<CreateQueryArgs<GetUserQueryVariables, GetUserQuery>, 'query'>) => {
  return createQuery<GetUserQuery, GetUserQueryVariables>({
    ...args,
    query: GetUserDocument,
  });
};

solidstart-urql:

// Example of generated code
export const queryGetUser = createQuery<GetUserQuery, GetUserQueryVariables>(
  GetUserDocument,
  'get-user'
);
// Example of use in Start
import { queryGetUsers } from '~/generated/graphql';
const users = createAsync(() => queryGetUsers());

How Has This Been Tested?

Comprehensive test suites have been added for both plugins:

  • Test that imports are generated correctly with proper package names
  • Test that query hooks/primitives are generated with required and optional variables
  • Test that mutation hooks/actions are generated correctly
  • Test that subscription hooks are generated correctly
  • Test that configuration options (withPrimitives, urqlImportFrom) work as expected
  • Test that file extension validation works (.ts/.tsx requirement)
  • Test that generated TypeScript code compiles without errors

Test Results:

  • 26 tests total (13 for each plugin)
  • All tests passing
  • 0 lint errors
  • All TypeScript types validate correctly

Test Environment:

  • OS: macOS (Darwin 25.2.0)
  • @graphql-codegen/*: Latest from monorepo
  • NodeJS: v18+ (as per project requirements)

Checklist:

  • I have followed the CONTRIBUTING doc and the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas (comprehensive JSDoc added)
  • I have made corresponding changes to the documentation (JSDoc with @name tags and @exampleMarkdown)
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules (N/A - no dependencies)

Further comments

Implementation Details:

Both plugins extend ClientSideBaseVisitor from @graphql-codegen/visitor-plugin-common, following the same architecture as other URQL plugins in the monorepo.

Key differences from React/Vue URQL plugins:

  1. solid-urql: Uses SolidJS primitives (createQuery, createMutation, createSubscription) instead of React hooks
  2. solidstart-urql: Generates query primitives with resource keys and mutation actions suitable for SolidStart's server-side rendering

Configuration Options:

Both plugins support:

  • withPrimitives (default: true) - Enable/disable hook/primitive generation
  • urqlImportFrom - Customize the URQL package import source

Documentation:

All configuration options are documented with JSDoc including @name, @description, @default, and @exampleMarkdown tags for automatic documentation generation. The plugins are ready to be added to the documentation site's plugin registry.

@changeset-bot
Copy link

changeset-bot bot commented Jan 25, 2026

🦋 Changeset detected

Latest commit: 3aead04

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@graphql-codegen/typescript-solid-urql Major
@graphql-codegen/typescript-solidstart-urql Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@davedbase
Copy link
Author

davedbase commented Jan 25, 2026

Note that I had a couple issues following the contributor guide. Some notes for consideration:

  1. It indicates to use Vitest however all the other packages tests are Jest. Vitest implementations wont work.
  2. I couldn't complete step 9 item 2 because there is no website folder in repo. Can you point me to the correct location to register the plugin?
  3. Couldn't complete step 10 either
  4. The contributor guide recommends marking the version number of the package to codegen's version 6.1.1. However, many other projects have their own version. Why wouldn't I use 1.0.0 as the release of these to not confuse users into thinking it's 6 major versions ahead?

Could someone provide additional guidance on how to submit to Plugins Hub and the documentation website?

@davedbase
Copy link
Author

@dotansimha would love feedback on this PR if you have a moment :)

@davedbase
Copy link
Author

@dotansimha sorry to gently nudge but if you have a moment we'd appreciate a review and release so we can make use of it in our projects :) Thanks so much for you OSS efforts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant