## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
## 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' }
```
