aef7f27072
## 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' } ```
8 lines
256 B
JavaScript
8 lines
256 B
JavaScript
import { graphql } from 'graphql'
|
|
|
|
import { schema } from '../../pages/api/graphql'
|
|
|
|
export default async function queryGraphql(query, variableValues = {}) {
|
|
const { data } = await graphql({ schema, source: query, variableValues })
|
|
return data || {}
|
|
}
|