diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md new file mode 100644 index 0000000000..3b33b0c8ae --- /dev/null +++ b/examples/api-routes-graphql/README.md @@ -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. diff --git a/examples/api-routes-graphql/package.json b/examples/api-routes-graphql/package.json new file mode 100644 index 0000000000..0c35ff1b47 --- /dev/null +++ b/examples/api-routes-graphql/package.json @@ -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" +} diff --git a/examples/api-routes-graphql/pages/api/graphql.js b/examples/api-routes-graphql/pages/api/graphql.js new file mode 100644 index 0000000000..7dc2247a24 --- /dev/null +++ b/examples/api-routes-graphql/pages/api/graphql.js @@ -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' }) diff --git a/examples/api-routes-graphql/pages/index.js b/examples/api-routes-graphql/pages/index.js new file mode 100644 index 0000000000..973ffe4e23 --- /dev/null +++ b/examples/api-routes-graphql/pages/index.js @@ -0,0 +1,27 @@ +import fetch from 'isomorphic-unfetch' + +const Index = ({ users }) => ( +
+ {users.map((user, i) => ( +
{user.name}
+ ))} +
+) + +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