Proposing a new example "with-typescript-graphql" #9803
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 216b575 |
piglovesyou
force-pushed
the
example/with-typescript-graphql
branch
from
216b575
to
a2d128c
Compare
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: a2d128c |
jawadulhassan
approved these changes
Dec 21, 2019
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 6b80976 |
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall decrease ✓
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General Overall decrease ✓
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
Commit: f90412e |
piglovesyou
force-pushed
the
example/with-typescript-graphql
branch
from
f90412e
to
d5c12bd
Compare
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: d5c12bd |
lfades
reviewed
Jan 3, 2020
lfades
reviewed
Jan 3, 2020
lfades
reviewed
Jan 3, 2020
lfades
requested changes
Jan 3, 2020
piglovesyou
commented
Jan 4, 2020
* Use "lib" for tools directory * Move config decorator to next.config.js * Apply stricter tsconfig * mod: hide the word "apollo" from users
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 36e70d3 |
|
@lfades I need your advice. Would you like me to use the same function name |
|
@piglovesyou It's still Apollo anyway, so that's why I prefer to keep it as I don't want users to forget that they're using Apollo either, specially because Apollo is just a tool that's using GraphQL, there are other alternatives that are also very good 😌 |
|
@piglovesyou Why is this happening?
I can't run the project locally. I'm on Windows |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: beb567b |
|
@lfades I got your point, glad for your considering. I modified all the var names to Sorry, I didn't check Windows, now it should work. Please |
|
@piglovesyou I'm getting this:
The example works and I also updated some things, but after the first render TypeScript throws saying it can't find the definitions for |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 83f131e |
* Use a wider glob for less pitfalls * Add a note about it in README.md
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 44ad565 |
|
@lfades Edit: It was my fault, I modified the library. It should work now but I need one more day to verify on the Windows machine. Glad if you try again. |
lfades
approved these changes
Jan 8, 2020
|
I appreciate you taking your time for this PR, thank you 😄 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
There are many good examples already but I'd like to propose a new one to achieve the thought of Apollo Data Graph and writing purely type-protected code in TypeScript by GraphQL Code Generator (graphql-codegen).
Apollo Data Graph as BFF
Owning a GraphQL server endpoint in charge of front-end devs widens technical options. With resolvers of Apollo Server, it conciliates any kind of external resources not only databases but REST APIs, Elasticsearch/other middlewares and even other GraphQL APIs to beautifully render view. Which is, so-called BFF.
Next.js has a great fit for the role of BFF. Here I respectfully used the Apollo Server and Client Example as the code base, which perfectly achieved SSR and providing an easy way to integrate Apollo Client with
withApolloHOC utility. Users will easily know how to expand GraphQL types/resolvers with the initial structure.TypeScript, graphql-codegen and graphql-let
graphql-codegen is a great tool to apply types of GraphQL schema to component development by generating additional
.tsxs. Only, it has to be executed to follow the latest schema and force users to manage generated.tsxfiles and then import them respectively.graphql-let that I've recently published connects the GraphQL documents and the codegen results as close as below, as it keeps giving benefits of TypeScript types, where users might almost forget code generation.
Accelerate the type-protected GraphQL development
Once I got used to the typed-BFF development style, where I declare all the types of external resources in GraphQL schema and write components using the statically and dynamically type-assured data as just I declared, I can't go back. Thankfully to the Node ecosystem, it's not too hard to set up that environment from scratch, but I thought it's a good idea for us to have a clean template to make it work out of the box in Next.js examples.
I'll draw a quick feature comparison table of the existing examples.