Example for GraphQL server with API routes (#7804)
* Example for GraphQL server with API routes * Update examples/api-routes-graphql/pages/index.js Co-Authored-By: Luis Fernando Alvarez D. <luis@zeit.co>
This commit is contained in:
parent
b013e11be3
commit
a6c7ab9776
4 changed files with 115 additions and 0 deletions
42
examples/api-routes-graphql/README.md
Normal file
42
examples/api-routes-graphql/README.md
Normal file
|
@ -0,0 +1,42 @@
|
|||
# API routes with GraphQL server
|
||||
|
||||
## How to use
|
||||
|
||||
### Using `create-next-app`
|
||||
|
||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example api-routes-graphql api-routes-graphql-app
|
||||
# or
|
||||
yarn create next-app --example api-routes-graphql api-routes-graphql-app
|
||||
```
|
||||
|
||||
### Download manually
|
||||
|
||||
Download the example:
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/api-routes-graphql
|
||||
cd api-routes-graphql
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# or
|
||||
yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||
|
||||
```bash
|
||||
now
|
||||
```
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app.
|
18
examples/api-routes-graphql/package.json
Normal file
18
examples/api-routes-graphql/package.json
Normal file
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "api-routes-graphql",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"apollo-server-micro": "2.6.7",
|
||||
"graphql": "14.4.2",
|
||||
"isomorphic-unfetch": "3.0.0",
|
||||
"next": "9.0.0",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
28
examples/api-routes-graphql/pages/api/graphql.js
Normal file
28
examples/api-routes-graphql/pages/api/graphql.js
Normal file
|
@ -0,0 +1,28 @@
|
|||
import { ApolloServer, gql } from 'apollo-server-micro'
|
||||
|
||||
const typeDefs = gql`
|
||||
type Query {
|
||||
users: [User!]!
|
||||
}
|
||||
type User {
|
||||
name: String
|
||||
}
|
||||
`
|
||||
|
||||
const resolvers = {
|
||||
Query: {
|
||||
users (parent, args, context) {
|
||||
return [{ name: 'Nextjs' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const apolloServer = new ApolloServer({ typeDefs, resolvers })
|
||||
|
||||
export const config = {
|
||||
api: {
|
||||
bodyParser: false
|
||||
}
|
||||
}
|
||||
|
||||
export default apolloServer.createHandler({ path: '/api/graphql' })
|
27
examples/api-routes-graphql/pages/index.js
Normal file
27
examples/api-routes-graphql/pages/index.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
import fetch from 'isomorphic-unfetch'
|
||||
|
||||
const Index = ({ users }) => (
|
||||
<div>
|
||||
{users.map((user, i) => (
|
||||
<div key={i}>{user.name}</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
Index.getInitialProps = async () => {
|
||||
const response = await fetch('http://localhost:3000/api/graphql', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ query: '{ users { name } }' })
|
||||
})
|
||||
|
||||
const {
|
||||
data: { users }
|
||||
} = await response.json()
|
||||
|
||||
return { users }
|
||||
}
|
||||
|
||||
export default Index
|
Loading…
Reference in a new issue