rsnext/examples/api-routes-apollo-server/package.json

{
  "name": "api-routes-apollo-server",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next export",
    "start": "next start"
  },
  "dependencies": {
    "apollo-server-micro": "2.13.1",
    "graphql": "15.0.0",
    "next": "latest",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "license": "ISC"
}
Example: Static Generation of local Apollo GraphQL schema (#13202) ## 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: - https://github.com/zeit/next.js/discussions/12785 - https://github.com/zeit/next.js/discussions/10946 - https://github.com/zeit/next.js/discussions/12182 - https://github.com/zeit/next.js/discussions/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' } ``` 2020-05-27 08:05:10 +02:00			`{`
			`"name": "api-routes-apollo-server",`
			`"version": "1.0.0",`
			`"scripts": {`
			`"dev": "next",`
			`"build": "next build",`
			`"export": "next export",`
			`"start": "next start"`
			`},`
			`"dependencies": {`
			`"apollo-server-micro": "2.13.1",`
			`"graphql": "15.0.0",`
			`"next": "latest",`
			`"react": "16.13.1",`
			`"react-dom": "16.13.1"`
			`},`
			`"license": "ISC"`
			`}`