feat(graphql-client): generate ts types from operations (#1027)

Author: pradel

.prettierignore

@@ -2,7 +2,8 @@ coverage
 lib
 build
 package.json
-packages/graphql-api/schema.json
+packages/graphql-api/introspection.json
 packages/graphql-api/src/models.ts
+packages/graphql-client/src/graphql-operations.ts
 website/.docusaurus
 website/docs/api

examples/graphql-server-typescript/README.md

@@ -37,11 +37,7 @@ yarn start
 ```graphql
 mutation CreateUser {
   createUser(
-    user: {
-      email: "[email protected]"
-      password: "1234567"
-      profile: { firstName: "John", lastName: "Doe" }
-    }
+    user: { email: "[email protected]", password: "1234567", firstName: "John", lastName: "Doe" }
   )
 }
 

examples/graphql-server-typescript/src/index.ts

@@ -27,6 +27,13 @@ const start = async () => {
     // This option is called when a new user create an account
     // Inside we can apply our logic to validate the user fields
     validateNewUser: (user) => {
+      if (!user.firstName) {
+        throw new Error('First name required');
+      }
+      if (!user.lastName) {
+        throw new Error('Last name required');
+      }
+
       // For example we can allow only some kind of emails
       if (user.email.endsWith('.xyz')) {
         throw new Error('Invalid email');
@@ -61,10 +68,11 @@ const start = async () => {
 
     # Our custom fields to add to the user
     extend input CreateUserInput {
-      profile: CreateUserProfileInput!
+      firstName: String!
+      lastName: String!
     }
 
-    input CreateUserProfileInput {
+    extend type User {
       firstName: String!
       lastName: String!
     }

examples/react-graphql-typescript/package.json

@@ -36,6 +36,7 @@
     "apollo-link": "1.2.14",
     "apollo-link-http": "1.5.17",
     "graphql": "14.6.0",
+    "graphql-tag": "2.10.4",
     "qrcode.react": "1.0.0",
     "react": "16.13.1",
     "react-apollo": "2.5.8",

examples/react-graphql-typescript/src/Home.tsx

@@ -15,6 +15,8 @@ const GET_USER_QUERY = gql`
         address
         verified
       }
+      firstName
+      lastName
     }
   }
 `;
@@ -44,7 +46,8 @@ const Home = ({ history }: RouteComponentProps<{}>) => {
       <Typography gutterBottom>Hello {data.getUser.username}</Typography>
       <Typography gutterBottom>You are logged in</Typography>
       <Typography gutterBottom>Email: {data.getUser.emails[0].address}</Typography>
-      <Typography gutterBottom>You username is {data.getUser.username}</Typography>
+      <Typography gutterBottom>First name: {data.getUser.firstName}</Typography>
+      <Typography gutterBottom>Last name: {data.getUser.lastName}</Typography>
       <Typography gutterBottom>
         You email is {data.getUser.emails[0].verified ? 'verified' : 'unverified'}
       </Typography>

examples/react-graphql-typescript/src/Signup.tsx

@@ -41,10 +41,8 @@ const Signup = ({ history }: RouteComponentProps<{}>) => {
       await accountsGraphQL.createUser({
         email: user.email,
         password: user.password,
-        profile: {
-          firstName: user.firstName,
-          lastName: user.lastName,
-        },
+        firstName: user.firstName,
+        lastName: user.lastName,
       });
       history.push('/login');
     } catch (err) {

examples/react-graphql-typescript/src/utils/accounts.ts

@@ -6,6 +6,7 @@ import { ApolloClient } from 'apollo-client';
 import { HttpLink } from 'apollo-link-http';
 import { from } from 'apollo-link';
 import { InMemoryCache } from 'apollo-cache-inmemory';
+import gql from 'graphql-tag';
 
 // This auth link will inject the token in the headers on every request you make using apollo client
 const authLink = accountsLink(() => accountsClient);
@@ -19,7 +20,20 @@ const apolloClient = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-const accountsGraphQL = new GraphQLClient({ graphQLClient: apolloClient });
+const accountsGraphQL = new GraphQLClient({
+  graphQLClient: apolloClient,
+  userFieldsFragment: gql`
+    fragment userFields on User {
+      id
+      emails {
+        address
+        verified
+      }
+      firstName
+      lastName
+    }
+  `,
+});
 const accountsClient = new AccountsClient({}, accountsGraphQL);
 const accountsPassword = new AccountsClientPassword(accountsClient);
 

packages/boost/package.json

@@ -33,7 +33,7 @@
     "@accounts/types": "^0.28.0",
     "@graphql-modules/core": "0.7.17",
     "apollo-server": "^2.9.3",
-    "graphql": "^14.5.4",
+    "graphql": "14.6.0",
     "graphql-tools": "^5.0.0",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.15",

packages/graphql-api/codegen.yml

@@ -2,6 +2,11 @@ overwrite: true
 schema: ./src/schema.ts
 require: ts-node/register/transpile-only
 generates:
+  introspection.json:
+    plugins:
+      - introspection
+    config:
+      minify: true
   ./src/models.ts:
     config:
       noNamespaces: true