Example: Static Generation of local Apollo GraphQL schema #13202

benjaminpearson · 2020-05-21T22:12:42Z

What

An example to show how you can create a static generated build of Next.js (using the new getStaticProps and getStaticPaths functions) with data fetched from a local GraphQL schema. The same schema is used to host a GraphQL endpoint using the API Route /api/graphql.

Why

I was setting up a static hosted website whereby data is stored in a set of local JSON files (pulled from a backend server at build time). I wanted to consume the content using the developer benefits that GraphQL provides and using a consistent interface the GraphQL API consumers would be using.

Within my page components I initially made GraphQL fetch calls to the locally running /api/graphql endpoint which worked well with npm run dev, however when it came to npm run build that endpoint was inaccessible (I tried both VERCEL_URL and localhost:3000) - which is now understandable given I read further the "Write server-side code directly" documentation.

This example may or may not be useful for others so please feel free to close, but I thought I would contribute incase it assisted others.

Related Discussions

It looks as though this PR may help with some of the following discussions:

Related Examples

The end solution for this PR was a combination of web discussions and seeing the api-routes-graphql example. Perhaps this PR should just update that example to use the new methods? Or maybe it is worth having both?

https://github.com/zeit/next.js/blob/canary/examples/examples/api-routes-graphql

This is also similar to this example, although that example has more code in order to provide isomorphic Apollo Client for client side code use.

https://github.com/zeit/next.js/blob/canary/examples/api-routes-apollo-server-and-client

Errors Recieved

I've included the below errors as they are the ones I faced when figuring out the end solution. These may just help with SEO for others googling the same issue.

Error when trying to use localhost:3000

> Build error occurred
{ FetchError: request to http://localhost:3000/api/graphql failed, reason: connect ECONNREFUSED 127.0.0.1:3000
    at ClientRequest.<anonymous> (/vercel/7cf60e2b/.next/serverless/pages/content.js:1999:147829)
    at ClientRequest.emit (events.js:198:13)
    at Socket.socketErrorListener (_http_client.js:401:9)
    at Socket.emit (events.js:198:13)
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at process._tickCallback (internal/process/next_tick.js:63:19) type: 'system', errno: 'ECONNREFUSED', code: 'ECONNREFUSED' }

Error when trying to use VERCEL_URL

> Build error occurred
{ FetchError: invalid json response body at https://vercel.com/login?next=%2Fdeployments%2Fprojectnamehere.now.sh%3Fhost%3Dprojectnamehere.now.sh%26redirect%3D1%26section%3D reason: Unexpected token < in JSON at position 0
    at /vercel/3d91c11/node_modules/next/dist/compiled/node-fetch/index.js:1:133590
    at process._tickCallback (internal/process/next_tick.js:68:7) type: 'invalid-json' }

lfades · 2020-05-21T22:16:34Z

@benjaminpearson Can you rename the example to api-routes-apollo-server 🙏

We currently have api-routes-apollo-server-and-client which does the same thing but also uses Apollo Client, and from what I can see this is only Apollo server so it makes sense.

ijjk · 2020-05-21T22:20:18Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	11.5s	11.4s	-48ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.953	1.832	-0.12
/ avg req/sec	1279.83	1364.92	⚠️ +85.09
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.116	1.127	⚠️ +0.01
/error-in-render avg req/sec	2240.5	2217.66	-22.84

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.module.js gzip	5.58 kB	5.58 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.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	12.5s	12.1s	-314ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.module.js gzip	5.58 kB	5.58 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.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

ijjk · 2020-05-21T22:39:32Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	11.7s	11.7s	⚠️ +26ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.948	2.012	⚠️ +0.06
/ avg req/sec	1283.24	1242.76	-40.48
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.206	1.16	-0.05
/error-in-render avg req/sec	2072.91	2155.67	⚠️ +82.76

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.module.js gzip	5.58 kB	5.58 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.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	12.9s	12.9s	-27ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.module.js gzip	5.58 kB	5.58 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.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

ijjk · 2020-05-21T22:41:34Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	11.7s	11.3s	-349ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.049	1.995	-0.05
/ avg req/sec	1220.08	1253.29	⚠️ +33.21
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.297	1.228	-0.07
/error-in-render avg req/sec	1927.72	2036.46	⚠️ +108.74

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.module.js gzip	5.58 kB	5.58 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.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
index.html gzip	928 B	928 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	12.2s	11.9s	-268ms
nodeModulesSize	61.8 MB	61.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.module.js gzip	5.58 kB	5.58 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.4 kB	52.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	✓
routerDirect.js	874 kB	874 kB	✓
withRouter.js	874 kB	874 kB	✓
Overall change	4.33 MB	4.33 MB	✓

Timer

Thanks!

ijjk · 2020-05-27T05:57:30Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	11.6s	12s	⚠️ +395ms
nodeModulesSize	67.3 MB	67.3 MB	✓

Page Load Tests Overall increase ✓

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.26	2.037	-0.22
/ avg req/sec	1106.25	1227.03	⚠️ +120.78
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.384	1.238	-0.15
/error-in-render avg req/sec	1805.84	2018.79	⚠️ +212.95

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..c03c.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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
index.html gzip	927 B	927 B	✓
link.html gzip	936 B	936 B	✓
withRouter.html gzip	925 B	925 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
buildDuration	14s	12.9s	-1.1s
nodeModulesSize	67.3 MB	67.3 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..c03c.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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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)

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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.06 kB	2.06 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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	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

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	benjaminpearson/next.js static-export-local-apollo-graphql	Change
_error.js	876 kB	876 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	914 kB	914 kB	✓
routerDirect.js	907 kB	907 kB	✓
withRouter.js	907 kB	907 kB	✓
Overall change	4.49 MB	4.49 MB	✓

## What An example to show how you can create a static generated build of Next.js (using the new `getStaticProps` and `getStaticPaths` functions) with data fetched from a local GraphQL schema. The same schema is used to host a GraphQL endpoint using the API Route `/api/graphql`. ## Why I was setting up a static hosted website whereby data is stored in a set of local JSON files (pulled from a backend server at build time). I wanted to consume the content using the developer benefits that GraphQL provides and using a consistent interface the GraphQL API consumers would be using. Within my page components I initially made GraphQL `fetch` calls to the locally running `/api/graphql` endpoint which worked well with `npm run dev`, however when it came to `npm run build` that endpoint was inaccessible (I tried both VERCEL_URL and localhost:3000) - which is now understandable given I read further the "[Write server-side code directly](https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly)" documentation. This example may or may not be useful for others so please feel free to close, but I thought I would contribute incase it assisted others. ## Related Discussions It looks as though this PR may help with some of the following discussions: - vercel#12785 - vercel#10946 - vercel#12182 - vercel#11285 ## Related Examples The end solution for this PR was a combination of web discussions and seeing the `api-routes-graphql` example. Perhaps this PR should just update that example to use the new methods? Or maybe it is worth having both? - https://github.com/zeit/next.js/blob/canary/examples/examples/api-routes-graphql This is also similar to this example, although that example has more code in order to provide isomorphic Apollo Client for client side code use. - https://github.com/zeit/next.js/blob/canary/examples/api-routes-apollo-server-and-client ## Errors Recieved I've included the below errors as they are the ones I faced when figuring out the end solution. These may just help with SEO for others googling the same issue. ### Error when trying to use localhost:3000 ``` > Build error occurred { FetchError: request to http://localhost:3000/api/graphql failed, reason: connect ECONNREFUSED 127.0.0.1:3000 at ClientRequest.<anonymous> (/vercel/7cf60e2b/.next/serverless/pages/content.js:1999:147829) at ClientRequest.emit (events.js:198:13) at Socket.socketErrorListener (_http_client.js:401:9) at Socket.emit (events.js:198:13) at emitErrorNT (internal/streams/destroy.js:91:8) at emitErrorAndCloseNT (internal/streams/destroy.js:59:3) at process._tickCallback (internal/process/next_tick.js:63:19) type: 'system', errno: 'ECONNREFUSED', code: 'ECONNREFUSED' } ``` ### Error when trying to use VERCEL_URL ``` > Build error occurred { FetchError: invalid json response body at https://vercel.com/login?next=%2Fdeployments%2Fprojectnamehere.now.sh%3Fhost%3Dprojectnamehere.now.sh%26redirect%3D1%26section%3D reason: Unexpected token < in JSON at position 0 at /vercel/3d91c11/node_modules/next/dist/compiled/node-fetch/index.js:1:133590 at process._tickCallback (internal/process/next_tick.js:68:7) type: 'invalid-json' } ```

glasser · 2021-08-04T01:04:20Z

Hi @benjaminpearson!

I'm one of the maintainers of Apollo Server. We've had a lot of folks showing up on our repository trying to use apollo-server-micro with Next.js, and I think a lot of that is based on this example here. (apollographql/apollo-server#5547 apollographql/apollo-server#5517 apollographql/apollo-server#5544 etc) Specifically, they're trying to upgrade to Apollo Server 3 and are finding that it doesn't work any more.

I have to admit that I'm kind of confused about the relationship between Micro and Next.js. I get that they are both Vercel projects, but I don't understand how they're related. When I try to do basic research like looking at the Next.js website and Wikipedia page for references to Micro, or look at the Micro README for references to Next.js, I find nothing. It seems like the assumption that apollo-server-micro is an appropriate starting point for incorporating Apollo Server into Next.js comes from this example?

When I look at the API routes docs it suggests that Next is compatible with Express/Connect middlewares. So would it make more sense for folks trying to use AS with Next.js to use apollo-server-express instead? (apollo-server-express is by far the most popular AS integration and has more bugs ironed out / feature completeness than the community-contributed apollo-server-micro.)

In addition, would it make sense to upgrade to AS3, perhaps showing how to use top level await ? (I think the challenge people are running into is that AS3 requires you to run await server.start() during server startup which doesn't work by default in a Next.js setting.)

glasser · 2021-10-19T22:21:06Z

For what it's worth, it looks like this example uses Apollo Server 3 properly: https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql

Perhaps some of the older ones should be deleted or upgraded to match.

glasser · 2021-10-19T23:18:45Z

I filed #30082 to fix most of the examples.

benjaminpearson added 3 commits May 21, 2020 09:48

Static generation example with data fetching from local apollo graphql

b3a02f2

Rename example folder to match similar examples

8888dc6

Docs about statically exporting and fallback option

45e5b4e

benjaminpearson requested review from lfades and Timer as code owners May 21, 2020 22:12

benjaminpearson added 2 commits May 22, 2020 08:26

Ran prettier-fix over code

b5f78a1

Renamed to "api-routes-apollo-server"

919a8b7

timneutkens assigned lfades May 24, 2020

timneutkens added the examples Issue/PR related to examples label May 24, 2020

Timer approved these changes May 27, 2020

View reviewed changes

Timer added this to the 9.4.3 milestone May 27, 2020

Merge branch 'canary' into static-export-local-apollo-graphql

2e2c016

kodiakhq bot merged commit aef7f27 into vercel:canary May 27, 2020

glasser mentioned this pull request Aug 17, 2021

apollo-server-micro: "API resolved without sending a response for /api/graphql, this may result in stalled requests." with CORS apollographql/apollo-server#5596

Closed

glasser mentioned this pull request Sep 28, 2021

Error in 3.0+ version of apollo-server-micro with Next.js, requires server.start() in server less environment apollographql/apollo-server#5547

Closed

5 tasks

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example: Static Generation of local Apollo GraphQL schema #13202

Example: Static Generation of local Apollo GraphQL schema #13202

benjaminpearson commented May 21, 2020

lfades commented May 21, 2020 •

edited

Loading

ijjk commented May 21, 2020

ijjk commented May 21, 2020

ijjk commented May 21, 2020

Timer left a comment

ijjk commented May 27, 2020

glasser commented Aug 4, 2021

glasser commented Oct 19, 2021

glasser commented Oct 19, 2021

Example: Static Generation of local Apollo GraphQL schema #13202

Example: Static Generation of local Apollo GraphQL schema #13202

Conversation

benjaminpearson commented May 21, 2020

What

Why

Related Discussions

Related Examples

Errors Recieved

Error when trying to use localhost:3000

Error when trying to use VERCEL_URL

lfades commented May 21, 2020 • edited Loading

ijjk commented May 21, 2020

Stats from current PR

ijjk commented May 21, 2020

Stats from current PR

ijjk commented May 21, 2020

Stats from current PR

Timer left a comment

Choose a reason for hiding this comment

ijjk commented May 27, 2020

Stats from current PR

glasser commented Aug 4, 2021

glasser commented Oct 19, 2021

glasser commented Oct 19, 2021

lfades commented May 21, 2020 •

edited

Loading