babyfish-ct / graphql-ts-client Goto Github PK

View Code? Open in Web Editor NEW

145.0 6.0 19.0 23.13 MB

Typescript DSL for GraphQL.

License: MIT License

TypeScript 98.41% HTML 0.93% CSS 0.35% JavaScript 0.31%

graphql client codegen codegenerator typescript strongly-typed dsl graphql-dsl apollo relay

graphql-ts-client's Introduction

A new GraphQL client for TypeScript. it's TypeScript-DSL for GraphQL with full features.

Supports GraphQL queries with strongly typed code.
Automatically infers the type of the returned data according to the strongly typed query request, This is the essential difference between this framework and other similar frameworks, and it is also the reason why I created it.
Because of point 2, unlike other client-side code generation tools and relay-compiler, the code generation work is one-time. Once the code is generated, it can be developed continuously until the server interface changes, without the need to generate code again and again.

Null & Undefined

For a long time, null and undefined have led to the differentiation of JavaScript/TypeScript development. This framework eliminates null and uniformly adopts undefined which is more friendly to TypeScript.

Get started

You can choose any of the following 4 ways

Step-by-step guide with nothing
Step-by-step guide with apollo-client
Step-by-step guide with relay
Step-by-step guide with graphql-state

graphql-state is a collaborative framework tailored for graphql-ts-client, and is a complete react state management framework.
- graphql-state is very smart. The essence of UI state is that one main mutation causes N extra mutations, the more complex the UI, the larger the N. graphql-state allows developer only focus on main mutation, all the extra mutations will be executed automatically. Compare with Apollo Client and Relay, after mutation, you neither need to update other affected data in the cache, nor need to determine which queries will be affected and need to be refetched.
- graphql-state can map the REST service to GraphQL service on client-side, access REST service with GraphQL semantics, and enjoying syntactic sugar provided by graphql-ts-client.

Documentation

English Documentation | 中文文档

Notes

My npm packages are 'graphql-ts-client-api', 'graphql-ts-client-codegen' and 'graphql-ts-client-relay'. There is another package named 'graphql-ts-client' in npm repository, but that's not my framework.

Other projects:

jimmer，A revolutionary ORM for Java and Kotlin. You can quickly implement a GraphQL server by using only a small part of these functions.

graphql-ts-client's People

Stargazers

Watchers

Forkers

snowm lennon-mawele tonitrnel kroll242 skyplaying liangruile-michela wallacy layerlre pmarchini vojtastanek robertmsale dusty nktpro jamesonknutson kamidere-laboratory alexis-opolka fanwj2023 robsonfj linecode

graphql-ts-client's Issues

Using alias for the same field, includes only the last field in the query

Hello. I cloned the example repo and was able to replicate it.

Just went into the EmployeeList.tsx file and as a test added these rows:

const test = query$ .findEmployees(employeeConnection$.totalCount, option => option.alias("first")) .findEmployees(employeeConnection$.totalCount, option => option.alias("second")) .findEmployees(employeeConnection$.totalCount, option => option.alias("third")) console.log(test.toString())

Expected output of the console log is:

But I get

The aliases "first" and "second" didn't show up in the query.

Is this an issue on the way I construct the query or a bug?
If i try it in GraphiQl, the expected syntax is correct.

Cannot stringify nested input arguments

This code:

execute(mutation$.upsertIssue(
	{
		by: {
			year: 2022,
			issue: 19,
		},
		create: {
			title: "A",
			subtitle: "B",
		},
		update: {
			title: "A",
			subtitle: "B",
		},
	},
	issueUpsertResult$.ok.errorMessage,
))

Results in the following query

mutation {
        upsertIssue(
                by: ,
                "year": 2022,
                "issue": 19,
                create: ,
                "title": "A",
                "subtitle": "B",
                update: ,
                "title": "A",
                "subtitle": "B"
        ) {
                ok
                errorMessage
        }
}

Expected mutation:

mutation {
        upsertIssue(
                by: { "year": 2022, "issue": 19 },
                create: { "title": "A", "subtitle": "B" },
                update: { "title": "A", "subtitle": "B" },
        ) {
                ok
                errorMessage
        }
}

Enums not properly encoded in query

I have the following fetcher (where publishAt is an enum):

export const articleFetcher = article$
	.issues(
		{
			limit: 1,
			orderBy: [{ article: { publishAt: "desc" } }],
		},
		issueArticle$.id
	)

It results in following query:

query {
    listArticle {
        issues(
            limit: 1,
            orderBy: [{article: {publishAt: "desc"}}]
        ) {
            issue {
                legacyId
            }
        }
    }
}

instead of

query {
    listArticle {
        issues(
            limit: 1,
            orderBy: [{article: {publishAt: desc}}]
        ) {
            issue {
                legacyId
            }
        }
    }
}

EnumInputMetadata.ts fails to be parsed by typescript for large schemas

Hi!

I have a fairly big schema and EnumInputMetadata.ts has over 3000 lines of code. TS fails to parse it due to the fluent interface. I propose to instead of this:

export const ENUM_INPUT_METADATA = (() => {
	 new EnumInputMetadataBuilder()
	  .add("ContentReferenceType")
	  .add("ContentReferenceTypeCondition", [
		{name: "eq", typeName: "ContentReferenceType"},
		{name: "notEq", typeName: "ContentReferenceType"},
		{name: "in", typeName: "ContentReferenceType"},
		{name: "notIn", typeName: "ContentReferenceType"},
		{name: "lt", typeName: "ContentReferenceType"},
		{name: "lte", typeName: "ContentReferenceType"},
		{name: "gt", typeName: "ContentReferenceType"},
		{name: "gte", typeName: "ContentReferenceType"}
	])
	// More lines...
	  .build()
});

do this:

export const ENUM_INPUT_METADATA = (() => {
	let buidler = new EnumInputMetadataBuilder()
	builder.add("ContentReferenceType")
	builder.add("ContentReferenceTypeCondition", [
		{name: "eq", typeName: "ContentReferenceType"},
		{name: "notEq", typeName: "ContentReferenceType"},
		{name: "in", typeName: "ContentReferenceType"},
		{name: "notIn", typeName: "ContentReferenceType"},
		{name: "lt", typeName: "ContentReferenceType"},
		{name: "lte", typeName: "ContentReferenceType"},
		{name: "gt", typeName: "ContentReferenceType"},
		{name: "gte", typeName: "ContentReferenceType"}
	])
	// More lines...
	builder.build()
});

which TS has no problem with.

Enums in arguments are serialized in quotes

When there is an enum in query inlined arguments it is serialized as a string in quotes. See the following example - the alignment input field is an enum field.

Current request:

mutation {
        someMutation(
                update: {alignment: "left"}
        ) {
                ok
                errorMessage
        }
}

Expected request:

mutation {
        someMutation(
                update: {alignment: left}
        ) {
                ok
                errorMessage
        }
}

I can work around it by sending the arguments in variables, but that's not ideal for my use case.

Type from request

This is currently what i'm doing

const request = query$.session(
  sessionQuery$.user(
    user$
      .id
      .name
      .email
  )
)

interface User {
  id: string
  name: string
  email: string
}

async function makeRequest(): Promise<User> {
  return (await execute(request)).session.user!
}

function printUser(user: User): void {
  console.log(user.name + " - " + user.email)
}

The response from the GraphQL request needs to be referenced in the code.
So i'm making a new interface to represent that data structure.
(in this example that is User)

What i would like to do

const request = query$.session(
  sessionQuery$.user(
    user$
      .id
      .name
      .email
  )
)

type User = ResponseOf<request>()

async function makeRequest(): Promise<User> {
  return (await execute(request)).session.user!
}

function printUser(user: User): void {
  console.log(user.name + " - " + user.email)
}

I want to store the return type in a place so that it can be reused.
type User here will be the equivalent of the User interface from earlier.
But User type will now update when the request is updated.

A similar project named GraphQL zeus has done something similar.
https://graphqleditor.com/docs/tools/zeus/basics/selector/

type InferredResponseType = InputType<GraphQLTypes['Query'], typeof drawCardQuery>;

Is there currently any way to do that i this library?
If not then would you be able to implement it?

Error on codegen

While following this tutorial I received

 The type "ChannelGroupConnection" is connection, its field "edges" must be not-null list
  at connectionTypeTuple (...\node_modules\.pnpm\g[email protected]\node_modules\graphql-ts-client-codegen\dist\Generator.js:341:31)
    at AsyncGenerator.<anonymous> (...\node_modules\.pnpm\g[email protected]\node_modules\graphql-ts-client-codegen\dist\Generator.js:55:39)
    at Generator.next (<anonymous>)

the only difference is
I changed

return loadRemoteSchema("https://paas-api.pluralsight.com/graphql", { authorization: `Bearer ...´

and I removed the

 defaultFetcherExcludeMap: {
      "Department": ["avgSalary"]
    },

you can see all return "types" in the API docs

P.S.: I can't change the API so I'm stuck...

Type of filter for nullable field is possibly wrong

你好!
谢谢你 for the library. It has been a joy to use so far.

One thing I noticed is that the types for a filter whose type is nullable, for example String as opposed to String!, are possible broken.

For example, lets say I have a field called email with type String and a filter called equals exist for that field. In a graphql PlayGround I can type this query as

query usersWithNoEmail() {
  users( where: { email: { equals: null } }){
    id,
    userName,
    email
}

And as I would expect I get a response that looks something like:

{
  "data": {
    "users":  [
        {
        "id": "1234",
        "userName":  "testUser",
        "email": null
        },
        ....
      ]
   }
}

However, the generated type for the filter looks something like this:

...
email?: { equals?: string | undefined , ...}
...

I believe this is incorrect. If I pass undefined as opposed to null as a value, that part of the filter is simply discarded. When I strictly follow the generated type it seems it is not possible for me to filter using null values.

My backend supports this, of course, so when I simply ignore the generated type with a // @ts-ignore, the query is executed as expected.

Is it possible that there is a setting that I missed? My config looks something like this:

const {
  ApolloGenerator,
  loadRemoteSchema,
} = require("graphql-ts-client-codegen");
const path = require("path");
const generator = new ApolloGenerator({
  schemaLoader: async () => {
    return loadRemoteSchema(REDACTED);
  },
  targetDir: path.join(__dirname, "../src/__generated"),
  defaultFetcherExcludeMap: {},
  scalarTypeMap: {
    Decimal: "number",
  },
});
generator.generate();

Feature: more types of enum generation

The tsEnum option could have another option to generate enum types with string values

Currently with tsEnum=true generates:
enum Count { ONE, TWO, THREE }

i would like to keep my values as strings, but still generating enum types instead of union types like this:
type Count = 'ONE' | 'TWO' | 'THREE'

Support for enum types with value strings like this would be nice 👍 :

enum Count {
   ONE = 'ONE', 
   TWO = 'TWO',
   THREE = 'THREE'
}

Use outside of react/apollo

Currently, the generated code is tightly coupled with react. Would be amazing to also use outside of react by maybe outsourcing the react hooks and specific wrappers to another library. Would make it easier to use different clients under the hood also like urql.

If decoupled, it could look something like:

ObjectFetcher 在 import 语句中的问题

生成的 Fetchers 文件中，import 语句是:

import type { ... } from 'graphql-ts-client-api';
import { ObjectFetcher, ... } from 'graphql-ts-client-api';

似乎应该是这样的?

import type { ... , ObjectFetcher } from 'graphql-ts-client-api';
import { ... } from 'graphql-ts-client-api';

或者?

import type { ...  } from 'graphql-ts-client-api';
import { type ObjectFetcher, ... } from 'graphql-ts-client-api';

Scalar type for json/jsonb

Hi, really cool framework! How can we handle types like json/jsonb that e.g. Hasura uses? Its neither scalar string nor number or boolean, its just a pure JSON value (so Record<string, unknown/any>).

Error: Unknown scalar type BigInt

RT, This error is reported when I enable the node scripts/GraphQLCodeGenerator.js command

Code generation query_root$ type error with execute function

The result of the code generation I got, doesn't seem to contain query$ only query_root$

const { AsyncGenerator, loadRemoteSchema } = require( "graphql-ts-client-codegen" );
const path = require( "path" );

const generator = new AsyncGenerator( {
    schemaLoader: async() => {
        return loadRemoteSchema( "https://beta.pokeapi.co/graphql/v1beta" );
    },
    targetDir: path.join( __dirname, "/pokeapi-graphql" ),
} );
generator.generate();

I thought nothing of it it and just used query_root$ and it worked in the query definition, everything was like I expected it

export const POKEMON_LIST_QUERY =
query_root$.pokemon_v2_pokemon(
{
    offset: ParameterRef.of( "offset" ),
    limit: ParameterRef.of( "limit" )
},
pokemon_v2_pokemon$
.name.weight.height
.pokemon_v2_pokemonspecy(
    pokemon_v2_pokemonspecies$
    .pokemon_v2_pokemonspeciesnames(
        {
            where: {
                pokemon_v2_language: {
                    iso3166: {
                        _eq: ""
                    }
                }
            }
        },
        pokemon_v2_pokemonspeciesname$
        .genus
    )
).pokemon_v2_pokemonsprites(
    pokemon_v2_pokemonsprites$.sprites
) );

But when I actually wanted to execute it, I got this error when trying to pass the query

Types of property 'fetchableType' are incompatible.
Type 'FetchableType<"query_root">' is not assignable to type 'FetchableType<"Query" | "Mutation">

execute( POKEMON_LIST_QUERY, {
    variables: {
        offset: 0,
        limit: 50,
        //lang: "en"
        where: {
            pokemon_v2_language: {
                iso3166: {
                    _eq: "en"
                }
            }
        }
    }
} ).then( ( value ) => {

    console.log( value.pokemon_v2_pokemon.toString() )
} )

The type information VS-Code shows me

const POKEMON_LIST_QUERY: query_rootFetcher<{
    readonly pokemon_v2_pokemon: readonly ({
        readonly name: string;
    } & {
        readonly weight?: number | undefined;
    } & {
        readonly height?: number | undefined;
    } & {
        readonly pokemon_v2_pokemonspecy?: {
            readonly pokemon_v2_pokemonspeciesnames: readonly {
                ...;
            }[];
        } | undefined;
    } & {
        ...;
    })[];
}, UnresolvedVariables<...> & ... 1 more ... & UnresolvedVariables<...>>

The full error message:

Argument of type 'query_rootFetcher<{ readonly pokemon_v2_pokemon: readonly ({ readonly name: string; } & { readonly weight?: number | undefined; } & { readonly height?: number | undefined; } & { readonly pokemon_v2_pokemonspecy?: { readonly pokemon_v2_pokemonspeciesnames: readonly { ...; }[]; } | undefined; } & { ...; })[]; }, Unres...' is not assignable to parameter of type 'Fetcher<"Query" | "Mutation", { readonly pokemon_v2_pokemon: readonly ({ readonly name: string; } & { readonly weight?: number | undefined; } & { readonly height?: number | undefined; } & { readonly pokemon_v2_pokemonspecy?: { ...; } | undefined; } & { ...; })[]; }, UnresolvedVariables<...> & ... 1 more ... & Unreso...'.
  Types of property 'fetchableType' are incompatible.
    Type 'FetchableType<"query_root">' is not assignable to type 'FetchableType<"Query" | "Mutation">'.
      Type '"query_root"' is not assignable to type '"Query" | "Mutation"'.ts(2345)

Annotation Support

Will be nice if we can support the annotations (Like Deprecation that is inserted as comment) like graphql-code-generator does!

Anyway, awesome job!

Using variables

Variables seem to not be currently supported, even though they are a really important part of what makes GQL. A similar library has this syntax, maybe its helpful: https://github.com/graphql-editor/graphql-zeus#variables

Conflict type

Following code

	const partsIdResponse = await contember.execute(contemberFetchers.query$.getArticle(
		{ by: { legacyId: post.post_id?.toString() } },
		contemberFetchers.article$
			.subtitle(contemberFetchers.textContent$.parts({ filter: {} }, contemberFetchers.textContentPart$$))
			.content(contemberFetchers.content$.parts({ filter: {} }, contemberFetchers.contentPart$$))
		,
	));

gives me an error

Error: Argument 'filter' has conflict type, it's typed has been specified twice, one as 'TextContentWhere' and one as 'ContentWhere'

Invalid ts generated (double readonly)

Codegen generates following code

    paths<
        X extends object, 
        XVariables extends object
    >(
        child: ObjectFetcher<'_PathFragment', X, XVariables>
    ): _MutationErrorFetcher<
        T & {readonly "paths": readonly readonly X[][]}, 
        TVariables & XVariables
    >;

    paths<
        X extends object, 
        XVariables extends object, 
        XAlias extends string = "paths", 
        XDirectives extends { readonly [key: string]: DirectiveArgs } = {}, 
        XDirectiveVariables extends object = {}
    >(
        child: ObjectFetcher<'_PathFragment', X, XVariables>, 
        optionsConfigurer: (
            options: FieldOptions<"paths", {}, {}>
        ) => FieldOptions<XAlias, XDirectives, XDirectiveVariables>
    ): _MutationErrorFetcher<
        T & (
            XDirectives extends { readonly include: any } | { readonly skip: any } ? 
                {readonly [key in XAlias]?: readonly readonly X[][]} : 
                {readonly [key in XAlias]: readonly readonly X[][]}
        ), 
        TVariables & XVariables & XDirectiveVariables
    >;

readonly readonly X[][] is not valid typescript - it should be readonly (readonly X[])[] instead.

The GraphQL schema looks like this:

type _MutationError {
  paths: [[_PathFragment!]!]!
}

Getting started with Vue/Nuxt3

Is it possible to use this library with Vue or, more specifically, Nuxt 3?

Are there any hints/getting started available?

How do i execute a subscription?

I'm not able to figure out how to execute subscriptions,
and i can't find this in the documentation either.

Is anyone able to give a code sample?
And maybe it could be added to the documentation too.

Uncaught Error: Illegal fetchable type "CustomerData", super class can only be specified for object type but its category is "EMBEDDED"

Good brother, this library is very nice, very like to use, but encountered some problems, confused me

This is the relevant screenshot and code

code gen script

import { ApolloGenerator, loadRemoteSchema } from 'graphql-ts-client-codegen';
import { join } from 'path';

// https://github.com/babyfish-ct/graphql-ts-client/blob/master/doc/apollo_zh_CN.md
const generator = new ApolloGenerator({
  schemaLoader: async () => {
    return loadRemoteSchema(
      'https://ininderprint-backend-nestjs.cloud-dev.ininderprint.tw/vendor-api/graphql'
    );
  },
  targetDir: join(__dirname, '../src/gencode') as string,
  defaultFetcherExcludeMap: {
    // Department: ['avgSalary'],
  },
  scalarTypeMap: {
    String: 'string',
  },
});
generator.generate();

graphql req file

import { useTypedQuery } from 'gencode';
import { query$, userProfile$ } from 'gencode/fetchers';
import React from 'react';

export default function Orders() {
  const { data, loading, error } = useTypedQuery(
    query$.myProfile(
      userProfile$.userUuid.nickname.firstName.lastName.gender.birthday.avatar
    )
  );

  return (
    <>
      {loading && <div style={{ color: 'green' }}>Loading...</div>}
      {error && <div style={{ color: 'red' }}>Error</div>}
      <div>userUuid: {data?.myProfile.userUuid}</div>
      <div>userUuid: {data?.myProfile.nickname}</div>
      <div>userUuid: {data?.myProfile.firstName}</div>
      <div>userUuid: {data?.myProfile.lastName}</div>
      <div>userUuid: {data?.myProfile.gender}</div>
      <div>userUuid: {data?.myProfile.birthday}</div>
      <div>userUuid: {data?.myProfile.avatar}</div>
    </>
  );
}

screenshot relate info

Trouble brother，Thank you very much and good luck

Union type has no values populated in the 4th argument of createFetchableType

export const integrationItem$: IntegrationItemFetcher<{}, {}> = 
    createFetcher(
        createFetchableType(
            "IntegrationItem", 
            "OBJECT", 
            [], 
            [
            ]
        ), 
        [
            'Integration', 
            'Company1Integration', 
            'Company2Integration', 
            'Company3Integration', 
            'Company4Integration', 
            'Company5Integration', 
            'Company6Integration'
        ]
    )
;

export const integrationItem$$ = 
    integrationItem$
        .id
        .createdAt
        .updatedAt
        .archived
        .deleted
        .name
        .description
        .integrationType
        .type
        .displayType
        .integrationTimezone
        .resourceUrl
        .resourceEndpoint
        .resourceAdminUrl
;

Which causes:

/fetchers/IntegrationItemFetcher.ts:411
        .updatedAt
         ^
TypeError: Cannot read property 'updatedAt' of undefined

Error union types does not has id field

Getting error when trying to generate types when the schema has union

Error: Section does not has id field
\node_modules\graphql-ts-client-codegen\dist\state\GraphQLStateFetcherWriter.js:63:35
throw new Error(${nodeType.name} does not has id field);

Schema

type Document {
    id: ID!
    sections: [Section!]!
  }

union Section = SectionTitle | SectionParagraph| SectionDivider

type BaseEntity {
    id: ID!
  }

type SectionDivider implements BaseEntity {
    id: ID!
  }

  type SectionTitle implements BaseEntity {
    id: ID!
    text: String
  }
  type SectionParagraph implements BaseEntity {
    id: ID!
    text: String
  }