Skip to content

Commit

Permalink
fix: rename package
Browse files Browse the repository at this point in the history
  • Loading branch information
@jedwards1211
jedwards1211 committed Feb 21, 2020
1 parent aa7e362 commit 5cf2dba
Show file tree
Hide file tree
Showing 25 changed files with 192 additions and 180 deletions.
118 changes: 65 additions & 53 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
# graphql-to-flow-codemod
# graphql-typegen

[![CircleCI](https://circleci.com/gh/codemodsquad/graphql-to-flow-codemod.svg?style=svg)](https://circleci.com/gh/codemodsquad/graphql-to-flow-codemod)
[![Coverage Status](https://codecov.io/gh/codemodsquad/graphql-to-flow-codemod/branch/master/graph/badge.svg)](https://codecov.io/gh/codemodsquad/graphql-to-flow-codemod)
[![CircleCI](https://circleci.com/gh/codemodsquad/graphql-typegen.svg?style=svg)](https://circleci.com/gh/codemodsquad/graphql-typegen)
[![Coverage Status](https://codecov.io/gh/codemodsquad/graphql-typegen/branch/master/graph/badge.svg)](https://codecov.io/gh/codemodsquad/graphql-typegen)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![npm version](https://badge.fury.io/js/graphql-to-flow-codemod.svg)](https://badge.fury.io/js/graphql-to-flow-codemod)
[![npm version](https://badge.fury.io/js/graphql-typegen.svg)](https://badge.fury.io/js/graphql-typegen)

Work in progress
**Work in progress**

JSCodeshift transform that inserts Flow types generated from GraphQL documents in template string literals and your GraphQL schema

# Rationale

With established GraphQL code generators out there (`apollo-tooling` and `graphql-codegen`)
you might wonder why I decided to make my own instead. There are several reasons...
you might wonder why I decided to make my own instead. There are several reasons...

## Importing generated types from external files is annoying

Both `graphql-codegen` and `apollo-tooling` output types in separate files from your
GraphQL documents. This means you have to pick a globally unique identifier for
each GraphQL operation. Dealing with global namespaces is always a pain in the ass.
It also means you have to insert an import statement. While I also have [my own tool
GraphQL documents. This means you have to pick a globally unique identifier for
each GraphQL operation. Dealing with global namespaces is always a pain in the ass.
It also means you have to insert an import statement. While I also have [my own tool
that's pretty damn good at automatic imports](https://github.com/jedwards1211/dude-wheres-my-module),
it would still be an annoying extra step.

`graphql-to-flow-codemod` just inserts the generated types after the GraphQL
`graphql-typegen` just inserts the generated types after the GraphQL
tagged template literals in my code, so I don't have to worry about picking
globally unique operation names or adding imports.

Expand All @@ -40,29 +42,34 @@ query Test($id: ID!) {
```

Output:

```js
type $Pick<Origin: Object, Keys: Object> = $ObjMapi<Keys, <Key>(k: Key) => $ElementType<Origin, Key>>;
type $Pick<Origin: Object, Keys: Object> = $ObjMapi<
Keys,
<Key>(k: Key) => $ElementType<Origin, Key>
>

export type TestQueryVariables = {
id: $ElementType<Scalars, 'ID'>
};

id: $ElementType<Scalars, 'ID'>,
}

export type TestQuery = ({
...{ __typename?: 'Query' },
...{| user: ?({
export type TestQuery = {
...{ __typename?: 'Query' },
...{|
user: ?{
...{ __typename?: 'User' },
...$Pick<User, {| id: *, username: * |}>
}) |}
});
...$Pick<User, {| id: *, username: * |}>,
},
|},
}
```
Pretty awful, huh? It's questionable if this even works properly in Flow; I've seen bugs with spreads inside inexact/ambiguous object types in the past.
Pretty awful, huh? It's questionable if this even works properly in Flow; I've seen bugs with spreads inside inexact/ambiguous object types in the past.
`graphql-to-flow-codemod` would output:
`graphql-typegen` would output:
```js
// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type TestQueryData = {
__typename: 'Query',
user: {
Expand All @@ -75,30 +82,30 @@ type TestQueryData = {
## I want to extract parts of the query with their own type aliases
Take the query example above. Let's say I need to refer to the `user` type in `TestQuery`
above. All I have to do is add this comment:
Take the query example above. Let's say I need to refer to the `user` type in `TestQuery`
above. All I have to do is add this comment:
```graphql
query Test($id: ID!) {
# @graphql-to-flow extract
# @graphql-typegen extract
user(id: $id) {
id
username
}
}
```
And `graphql-to-flow-codemod` will output:
And `graphql-typegen` will output:
```js
// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type User = {
__typename: 'User',
id: ID,
username: string,
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type TestQueryData = {
__typename: 'Query',
user: User,
Expand All @@ -114,7 +121,7 @@ especially for extracting types that are more than one level deep in the query
At the moment, [`apollo-tooling` doesn't support interpolation in tagged template literals](https://github.com/apollographql/apollo-tooling/issues/182).
This is a pretty crucial for sharing fragments between queries and mutations, which is, you know, common.
`graphql-to-flow-codemod` supports this:
`graphql-typegen` supports this:
```js
const UserFragment = gql`
Expand Down Expand Up @@ -144,40 +151,41 @@ const updateUserMutation = gql`
```
Output:
```js
// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserFields = {
id: ID,
username: string,
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserQueryData = {
__typename: 'Query',
user: {__typename: 'User'} & UserFields,
user: { __typename: 'User' } & UserFields,
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserQueryVariables = {
id: ID,
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UpdateUserMutationData = {
__typename: 'Mutation',
updateUser: {__typename: 'User'} & UserFields,
updateUser: { __typename: 'User' } & UserFields,
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UpdateUserMutationVariables = {
id: ID,
values: {
username?: string,
}
},
}
```
`graphql-to-flow-codemod` also supports string interpolation:
`graphql-typegen` also supports string interpolation:
```js
const userFields = `
Expand All @@ -201,47 +209,50 @@ const updateUserMutation = gql`
}
`
```
Output:
```js
// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserQueryData = {
__typename: 'Query',
user: {
__typename: 'User',
id: ID,
username: string,
}
},
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserQueryVariables = {
id: ID,
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UpdateUserMutationData = {
__typename: 'Mutation',
updateUser: {
updateUser: {
__typename: 'User',
id: ID,
username: string,
}
},
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UpdateUserMutationVariables = {
id: ID,
values: {
username?: string,
}
},
}
```
## Automatically adding type annotations to `useQuery`, `useMutation`, and `useSubscription` hooks
`graphql-to-flow-codemod` will analyze all calls to these hooks and add the correct type annotations:
`graphql-typegen` will analyze all calls to these hooks and add the correct type annotations:
### Before
```js
const userQuery = gql`
query user($id: ID!) {
Expand All @@ -252,14 +263,15 @@ const userQuery = gql`
}
`

const Foo = ({id}: {id: ID}): React.Node => {
const {data} = useQuery(userQuery, {variables: {id}})
const Foo = ({ id }: { id: ID }): React.Node => {
const { data } = useQuery(userQuery, { variables: { id } })
return <pre>{JSON.stringify(data)}</pre>
}
```
### After
`graphql-to-flow-codemod` inserts the type parameters `useQuery<UserQueryData, UserQueryVariables>`.
`graphql-typegen` inserts the type parameters `useQuery<UserQueryData, UserQueryVariables>`.
```js
const userQuery = gql`
Expand All @@ -271,7 +283,7 @@ const userQuery = gql`
}
`

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserQueryData = {
__typename: 'Query',
user: {
Expand All @@ -281,7 +293,7 @@ type UserQueryData = {
},
}

// @graphql-to-flow auto-generated
// @graphql-typegen auto-generated
type UserQueryVariables = {
id: ID,
}
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "graphql-to-flow-codemod",
"name": "graphql-typegen",
"version": "0.0.0-development",
"description": "generates flow types from gql template string literals",
"description": "JSCodeshift transform that inserts Flow types generated from GraphQL documents in template string literals and your GraphQL schema",
"sideEffects": false,
"scripts": {
"lint": "eslint $npm_package_config_lint",
Expand Down Expand Up @@ -68,7 +68,7 @@
},
"repository": {
"type": "git",
"url": "https://github.com/codemodsquad/graphql-to-flow-codemod.git"
"url": "https://github.com/codemodsquad/graphql-typegen.git"
},
"keywords": [
"graphql",
Expand All @@ -79,9 +79,9 @@
"author": "Andy Edwards",
"license": "MIT",
"bugs": {
"url": "https://github.com/codemodsquad/graphql-to-flow-codemod/issues"
"url": "https://github.com/codemodsquad/graphql-typegen/issues"
},
"homepage": "https://github.com/codemodsquad/graphql-to-flow-codemod#readme",
"homepage": "https://github.com/codemodsquad/graphql-typegen#readme",
"devDependencies": {
"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.6",
Expand Down
Loading

0 comments on commit 5cf2dba

Please sign in to comment.