Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Examples] Move with-graphql-hooks to SSG #13858

Merged
merged 3 commits into from Jun 8, 2020
Merged

[Examples] Move with-graphql-hooks to SSG #13858

merged 3 commits into from Jun 8, 2020

Conversation

lfades
Copy link
Member

@lfades lfades commented Jun 7, 2020 •
edited

Related to #11014

The setup is very similar to the one used for Apollo examples.

@Joezo I've removed the demo example that you added to the readme (#6482) as it will be outdated after this PR is merged.

@ijjk ijjk added the examples Issue/PR related to examples label Jun 7, 2020
@ijjk
Copy link
Member

ijjk commented Jun 7, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
buildDuration 11.6s 11.7s ⚠️ +123ms
nodeModulesSize 66 MB 66 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.05 2.123 ⚠️ +0.07
/ avg req/sec 1219.43 1177.52 -41.91
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.3 1.322 ⚠️ +0.02
/error-in-render avg req/sec 1922.9 1891.2 -31.7
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.js gzip 6.61 kB 6.61 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..9545.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.module.js gzip 5.69 kB 5.69 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.21 kB 8.21 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.51 kB 1.51 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.32 kB 5.32 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
index.html gzip 926 B 926 B ✓
link.html gzip 936 B 936 B ✓
withRouter.html gzip 923 B 923 B ✓
Overall change 2.79 kB 2.79 kB ✓
Serverless Mode
General
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
buildDuration 13s 12.7s -228ms
nodeModulesSize 66 MB 66 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.js gzip 6.61 kB 6.61 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..9545.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.module.js gzip 5.69 kB 5.69 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.21 kB 8.21 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.51 kB 1.51 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.32 kB 5.32 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_error.js 877 kB 877 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 877 kB 877 kB ✓
link.js 915 kB 915 kB ✓
routerDirect.js 907 kB 907 kB ✓
withRouter.js 907 kB 907 kB ✓
Overall change 4.49 MB 4.49 MB ✓

lfades
lfades commented Jun 7, 2020
View reviewed changes
examples/with-graphql-hooks/lib/graphql-request.js
Comment on lines +9 to +30
export default async function graphQLRequest(client, query, options) {
const opts = { ...defaultOpts, ...options }
const operation = {
query,
variables: opts.variables,
operationName: opts.operationName,
persisted: opts.persisted,
}

if (opts.persisted || (client.useGETForQueries && !opts.isMutation)) {
opts.fetchOptionsOverrides = {
...opts.fetchOptionsOverrides,
method: 'GET',
}
}

const cacheKey = client.getCacheKey(operation, opts)
const cacheValue = await client.request(operation, opts)

client.saveCache(cacheKey, cacheValue)
return cacheValue
}
Copy link
Member Author

@lfades lfades Jun 7, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bmullan91 Would be nice to have a better alternative to do this directly in graphql-hooks

Context: graphql-hooks-ssr doesn't work well with data fetching methods in Next.js, as we don't give access to the App component, instead the query or queries that are required to be server rendered get requested with this method before render, and the data is later added (by using the cache) to the GraphQL client in the browser as initial state.

@Timer Timer added this to the june 2020 milestone Jun 8, 2020
@ijjk
Copy link
Member

ijjk commented Jun 8, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
buildDuration 11.7s 11.8s ⚠️ +156ms
nodeModulesSize 66 MB 66 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.103 2.138 ⚠️ +0.03
/ avg req/sec 1188.54 1169.2 -19.34
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.415 1.342 -0.07
/error-in-render avg req/sec 1766.88 1862.35 ⚠️ +95.47
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.module.js gzip 5.67 kB 5.67 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.22 kB 8.22 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.33 kB 5.33 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
index.html gzip 925 B 925 B ✓
link.html gzip 936 B 936 B ✓
withRouter.html gzip 922 B 922 B ✓
Overall change 2.78 kB 2.78 kB ✓
Serverless Mode
General
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
buildDuration 12.6s 12.9s ⚠️ +342ms
nodeModulesSize 66 MB 66 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..ec24.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
main-HASH.module.js gzip 5.67 kB 5.67 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.22 kB 8.22 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.33 kB 5.33 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
vercel/next.js canary lfades/next.js ssg/with-graphql-hooks Change
_error.js 877 kB 877 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 877 kB 877 kB ✓
link.js 915 kB 915 kB ✓
routerDirect.js 908 kB 908 kB ✓
withRouter.js 908 kB 908 kB ✓
Overall change 4.49 MB 4.49 MB ✓

@kodiakhq kodiakhq bot merged commit b4ec992 into vercel:canary Jun 8, 2020
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@lfades @rokinsky
[Examples] Move with-graphql-hooks to SSG (vercel#13858)
a00e85d 
Related to vercel#11014

The setup is very similar to the one used for Apollo examples.

@Joezo I've removed the demo example that you added to the readme (vercel#6482) as it will be outdated after this PR is merged.
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Timer approved these changes

@chibicode chibicode Awaiting requested review from chibicode

@ijjk ijjk Awaiting requested review from ijjk

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
examples Issue/PR related to examples
Projects
None yet
Milestone
june 2020
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@lfades @ijjk @Timer