diff --git a/examples/with-apollo-neo4j-graphql/README.md b/examples/with-apollo-neo4j-graphql/README.md index 501d902c724b0..10ab275e52946 100644 --- a/examples/with-apollo-neo4j-graphql/README.md +++ b/examples/with-apollo-neo4j-graphql/README.md @@ -1,6 +1,6 @@ # Neo4j Example with GraphQL and Apollo -This is a simple set up for Next using Neo4j Database with GraphQL and Apollo. Neo4j's Movies dataset example is used to run the example. +This is a simple setup for Next using Neo4j Database with GraphQL and Apollo. Neo4j's Movies dataset example is used to run the example. ## Deploy your own @@ -28,7 +28,7 @@ pnpm create next-app --example with-apollo-neo4j-graphql with-apollo-neo4j-graph ### Step 1. Create a Neo4j database -First, you'll need a Neo4j database. [Neo4j Desktop](https://neo4j.com/download/) and [Neo4j Online Sandbox](https://neo4j.com/sandbox/) are good and free to use options. +First, you'll need a Neo4j database. [Neo4j Desktop](https://neo4j.com/download/) and [Neo4j Online Sandbox](https://neo4j.com/sandbox/) are good and free-to-use options. ### Step 2. Add the movie graph model to the database @@ -48,7 +48,7 @@ Next, copy the `.env.local.example` file in this directory to `.env.local` (whic cp .env.local.example .env.local ``` -Then set each variable on `.env.local` to match your database uri and credentials. +Then set each variable on `.env.local` to match your database URI and credentials. ## Deploy on Vercel @@ -65,3 +65,7 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [ Alternatively, you can deploy using our template by clicking on the Deploy button below. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-apollo-neo4j-graphql&project-name=with-apollo-neo4j-graphql&repository-name=with-apollo-neo4j-graphql&env=NEO4J_URI,NEO4J_USER,NEO4J_PASSWORD&envDescription=Required%20to%20connect%20the%20app%20with%20a%20Neo4j%20database&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-apollo-neo4j-graphql%23step-3-set-up-environment-variables) + +## Notes + +To learn more about how to use the Neo4j GraphQL Library, you can [take a look at the documentation](https://neo4j.com/docs/graphql-manual/current/) or [check out the GitHub repository](https://github.com/neo4j/graphql/). diff --git a/examples/with-apollo-neo4j-graphql/apollo/client.js b/examples/with-apollo-neo4j-graphql/apollo/client.ts similarity index 85% rename from examples/with-apollo-neo4j-graphql/apollo/client.js rename to examples/with-apollo-neo4j-graphql/apollo/client.ts index 4170db8ad25c2..02b7a2fc8b5e8 100644 --- a/examples/with-apollo-neo4j-graphql/apollo/client.js +++ b/examples/with-apollo-neo4j-graphql/apollo/client.ts @@ -1,18 +1,16 @@ import { useMemo } from 'react' -import { ApolloClient, InMemoryCache } from '@apollo/client' +import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client' +import { SchemaLink } from '@apollo/client/link/schema' import merge from 'deepmerge' let apolloClient function createIsomorphLink() { if (typeof window === 'undefined') { - const { SchemaLink } = require('@apollo/client/link/schema') const schema = require('./schema') return new SchemaLink({ schema }) } else { - const { HttpLink } = require('@apollo/client/link/http') - - return new HttpLink({ + return createHttpLink({ uri: '/api/graphql', credentials: 'same-origin', }) diff --git a/examples/with-apollo-neo4j-graphql/apollo/resolvers.js b/examples/with-apollo-neo4j-graphql/apollo/resolvers.js deleted file mode 100644 index c5e8f4450d652..0000000000000 --- a/examples/with-apollo-neo4j-graphql/apollo/resolvers.js +++ /dev/null @@ -1,15 +0,0 @@ -import { neo4jgraphql } from 'neo4j-graphql-js' - -export default { - Query: { - getMovies: (parent, args, context, resolveInfo) => { - return neo4jgraphql(parent, args, context, resolveInfo) - }, - getMovie: (parent, args, context, resolveInfo) => { - return neo4jgraphql(parent, args, context, resolveInfo) - }, - getActor: (parent, args, context, resolveInfo) => { - return neo4jgraphql(parent, args, context, resolveInfo) - }, - }, -} diff --git a/examples/with-apollo-neo4j-graphql/apollo/schema.js b/examples/with-apollo-neo4j-graphql/apollo/schema.js deleted file mode 100644 index 77bcc35b2bdcb..0000000000000 --- a/examples/with-apollo-neo4j-graphql/apollo/schema.js +++ /dev/null @@ -1,11 +0,0 @@ -import { makeAugmentedSchema } from 'neo4j-graphql-js' -import typeDefs from './type-defs' -import resolvers from './resolvers' - -export default makeAugmentedSchema({ - typeDefs, - resolvers, - config: { - mutation: false, - }, -}) diff --git a/examples/with-apollo-neo4j-graphql/apollo/schema.ts b/examples/with-apollo-neo4j-graphql/apollo/schema.ts new file mode 100644 index 0000000000000..916531c474fd7 --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/apollo/schema.ts @@ -0,0 +1,10 @@ +import { Neo4jGraphQL } from '@neo4j/graphql' +import typeDefs from './type-defs' +import getDriver from '../util/neo4j' + +const driver = getDriver() + +export const neoSchema = new Neo4jGraphQL({ + typeDefs, + driver, +}) diff --git a/examples/with-apollo-neo4j-graphql/apollo/type-defs.js b/examples/with-apollo-neo4j-graphql/apollo/type-defs.js deleted file mode 100644 index ad6c49b1954d2..0000000000000 --- a/examples/with-apollo-neo4j-graphql/apollo/type-defs.js +++ /dev/null @@ -1,23 +0,0 @@ -import { gql } from '@apollo/client' - -export default gql` - type Movie { - title: String - tagline: String - released: String - actors: [Person] @relation(name: "ACTED_IN", direction: "IN") - directors: [Person] @relation(name: "DIRECTED", direction: "IN") - } - - type Person { - name: String - born: Int - movies: [Movie] @relation(name: "ACTED_IN", direction: "OUT") - } - - type Query { - getMovies: [Movie] - getMovie: Movie - getActor: Person - } -` diff --git a/examples/with-apollo-neo4j-graphql/apollo/type-defs.ts b/examples/with-apollo-neo4j-graphql/apollo/type-defs.ts new file mode 100644 index 0000000000000..f8cf4f8271e7f --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/apollo/type-defs.ts @@ -0,0 +1,17 @@ +import { gql } from '@apollo/client' + +export default gql` + type Movie { + title: String + tagline: String + released: Int + actors: [Person!]! @relationship(type: "ACTED_IN", direction: IN) + directors: [Person!]! @relationship(type: "DIRECTED", direction: IN) + } + + type Person { + name: String + born: Int + movies: [Movie!]! @relationship(type: "ACTED_IN", direction: OUT) + } +` diff --git a/examples/with-apollo-neo4j-graphql/components/footer.js b/examples/with-apollo-neo4j-graphql/components/footer.tsx similarity index 100% rename from examples/with-apollo-neo4j-graphql/components/footer.js rename to examples/with-apollo-neo4j-graphql/components/footer.tsx diff --git a/examples/with-apollo-neo4j-graphql/components/header.js b/examples/with-apollo-neo4j-graphql/components/header.tsx similarity index 90% rename from examples/with-apollo-neo4j-graphql/components/header.js rename to examples/with-apollo-neo4j-graphql/components/header.tsx index 145c93b79ef3b..e6235dd9b1dcc 100644 --- a/examples/with-apollo-neo4j-graphql/components/header.js +++ b/examples/with-apollo-neo4j-graphql/components/header.tsx @@ -1,4 +1,4 @@ -export default function Header({ title }) { +export default function Header({ title }: { title?: string | string[] }) { return (

diff --git a/examples/with-apollo-neo4j-graphql/next.config.js b/examples/with-apollo-neo4j-graphql/next.config.js new file mode 100644 index 0000000000000..8b71f62400168 --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/next.config.js @@ -0,0 +1,13 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + webpack: (config) => { + // this will override the experiments + config.experiments = { ...config.experiments, topLevelAwait: true } + // this will just update topLevelAwait property of config.experiments + // config.experiments.topLevelAwait = true + return config + }, +} + +module.exports = nextConfig diff --git a/examples/with-apollo-neo4j-graphql/package.json b/examples/with-apollo-neo4j-graphql/package.json index 4b262081ed86a..4b5f277b43e25 100644 --- a/examples/with-apollo-neo4j-graphql/package.json +++ b/examples/with-apollo-neo4j-graphql/package.json @@ -6,12 +6,13 @@ "start": "next start" }, "dependencies": { - "@apollo/client": "^3.2.7", - "apollo-server-micro": "^2.19.0", - "deepmerge": "4.2.2", - "graphql": "14.2.1", - "neo4j-driver": "^4.2.1", - "neo4j-graphql-js": "^2.17.1", + "@apollo/client": "^3.7.3", + "@apollo/server": "^4.3.0", + "@as-integrations/next": "^1.2.0", + "@neo4j/graphql": "^3.14.1", + "deepmerge": "^4.2.2", + "graphql": "^16.6.0", + "neo4j-driver": "^5.3.0", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/with-apollo-neo4j-graphql/pages/_app.js b/examples/with-apollo-neo4j-graphql/pages/_app.tsx similarity index 62% rename from examples/with-apollo-neo4j-graphql/pages/_app.js rename to examples/with-apollo-neo4j-graphql/pages/_app.tsx index 8a545e35648da..4d82196930e93 100644 --- a/examples/with-apollo-neo4j-graphql/pages/_app.js +++ b/examples/with-apollo-neo4j-graphql/pages/_app.tsx @@ -1,15 +1,13 @@ +import '../styles/globals.css' import { ApolloProvider } from '@apollo/client' import { useApollo } from '../apollo/client' -import globalStyles from '../styles/global' +import type { AppProps } from 'next/app' -export default function MyApp({ Component, pageProps }) { +export default function MyApp({ Component, pageProps }: AppProps) { const apolloClient = useApollo(pageProps.initialApolloState) return ( - ) } diff --git a/examples/with-apollo-neo4j-graphql/pages/actor/[name].js b/examples/with-apollo-neo4j-graphql/pages/actor/[name].tsx similarity index 89% rename from examples/with-apollo-neo4j-graphql/pages/actor/[name].js rename to examples/with-apollo-neo4j-graphql/pages/actor/[name].tsx index 32dd57bf428cf..5330f83756343 100644 --- a/examples/with-apollo-neo4j-graphql/pages/actor/[name].js +++ b/examples/with-apollo-neo4j-graphql/pages/actor/[name].tsx @@ -4,10 +4,11 @@ import { useRouter } from 'next/router' import { gql, useQuery } from '@apollo/client' import Header from '../../components/header' import Footer from '../../components/footer' +import { Actors } from '../../types' const GET_ACTOR = gql` query GetActor($actorName: String) { - getActor(filter: { name: $actorName }) { + people(where: { name: $actorName }) { name born movies { @@ -20,8 +21,8 @@ const GET_ACTOR = gql` export default function Actor() { const router = useRouter() const { name } = router.query - const { loading, error, data } = useQuery(GET_ACTOR, { - actorName: name, + const { loading, error, data } = useQuery<{ people: Actors }>(GET_ACTOR, { + variables: { actorName: name }, }) if (loading) return 'Loading...' @@ -42,12 +43,12 @@ export default function Actor() {

Information

Born: - {data.getActor.born} + {data.people[0].born}

Movies

- {data.getActor.movies.map((movie) => ( + {data.people[0].movies.map((movie) => (
{ - return { - driver, - ...ctx, - } - }, -}) - -export const config = { - api: { - bodyParser: false, - }, -} - -export default apolloServer.createHandler({ path: '/api/graphql' }) diff --git a/examples/with-apollo-neo4j-graphql/pages/api/graphql.ts b/examples/with-apollo-neo4j-graphql/pages/api/graphql.ts new file mode 100644 index 0000000000000..d22a0ea196068 --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/pages/api/graphql.ts @@ -0,0 +1,10 @@ +import { ApolloServer } from '@apollo/server' +import { startServerAndCreateNextHandler } from '@as-integrations/next' +import { neoSchema } from '../../apollo/schema' + +const server = async (): Promise => { + const schema = await neoSchema.getSchema() + return new ApolloServer({ schema }) +} + +export default startServerAndCreateNextHandler(await server()) diff --git a/examples/with-apollo-neo4j-graphql/pages/index.js b/examples/with-apollo-neo4j-graphql/pages/index.tsx similarity index 95% rename from examples/with-apollo-neo4j-graphql/pages/index.js rename to examples/with-apollo-neo4j-graphql/pages/index.tsx index 1086bc241c624..1842e3d44bbb9 100644 --- a/examples/with-apollo-neo4j-graphql/pages/index.js +++ b/examples/with-apollo-neo4j-graphql/pages/index.tsx @@ -3,10 +3,11 @@ import Link from 'next/link' import { gql, useQuery } from '@apollo/client' import Header from '../components/header' import Footer from '../components/footer' +import type { Movies } from '../types' const GET_MOVIES = gql` query GetMovies { - getMovies { + movies { title tagline released @@ -21,7 +22,7 @@ const GET_MOVIES = gql` ` export default function Home() { - const { loading, error, data } = useQuery(GET_MOVIES) + const { loading, error, data } = useQuery<{ movies: Movies }>(GET_MOVIES) if (loading) return 'Loading...' if (error) return `Error! ${error.message}` @@ -53,7 +54,7 @@ export default function Home() { - {data.getMovies.map((movie, index) => ( + {data.movies.map((movie, index) => ( {index + 1} diff --git a/examples/with-apollo-neo4j-graphql/pages/movie/[title].js b/examples/with-apollo-neo4j-graphql/pages/movie/[title].tsx similarity index 85% rename from examples/with-apollo-neo4j-graphql/pages/movie/[title].js rename to examples/with-apollo-neo4j-graphql/pages/movie/[title].tsx index 4916ac5a29b4c..e1b0999b7e4f6 100644 --- a/examples/with-apollo-neo4j-graphql/pages/movie/[title].js +++ b/examples/with-apollo-neo4j-graphql/pages/movie/[title].tsx @@ -4,10 +4,11 @@ import { useRouter } from 'next/router' import { gql, useQuery } from '@apollo/client' import Header from '../../components/header' import Footer from '../../components/footer' +import type { Movies } from '../../types' const GET_MOVIE = gql` query GetMovie($movieTitle: String) { - getMovie(filter: { title: $movieTitle }) { + movies(where: { title: $movieTitle }) { title tagline released @@ -24,8 +25,8 @@ const GET_MOVIE = gql` export default function Movie() { const router = useRouter() const { title } = router.query - const { loading, error, data } = useQuery(GET_MOVIE, { - movieTitle: title, + const { loading, error, data } = useQuery<{ movies: Movies }>(GET_MOVIE, { + variables: { movieTitle: title }, }) if (loading) return 'Loading...' @@ -46,22 +47,22 @@ export default function Movie() {

Information

Tagline: - {data.getMovie.tagline} + {data.movies[0].tagline}
Released: - {data.getMovie.released} + {data.movies[0].released}

Actors

- {data.getMovie.actors.map((actor) => ( + {data.movies[0].actors.map((actor) => (
{actor.name}
))}

Directors

- {data.getMovie.directors.map((director) => ( + {data.movies[0].directors.map((director) => (
{director.name}
))}
diff --git a/examples/with-apollo-neo4j-graphql/styles/global.js b/examples/with-apollo-neo4j-graphql/styles/global.js deleted file mode 100644 index 8121d0c48f469..0000000000000 --- a/examples/with-apollo-neo4j-graphql/styles/global.js +++ /dev/null @@ -1,18 +0,0 @@ -import css from 'styled-jsx/css' - -export default css.global` - html, - body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - } - * { - box-sizing: border-box; - } - a { - color: inherit; - text-decoration: none; - } -` diff --git a/examples/with-apollo-neo4j-graphql/styles/globals.css b/examples/with-apollo-neo4j-graphql/styles/globals.css new file mode 100644 index 0000000000000..e5e2dcc23baf1 --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/styles/globals.css @@ -0,0 +1,16 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} diff --git a/examples/with-apollo-neo4j-graphql/tsconfig.json b/examples/with-apollo-neo4j-graphql/tsconfig.json new file mode 100644 index 0000000000000..1563f3e878573 --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/with-apollo-neo4j-graphql/types/index.ts b/examples/with-apollo-neo4j-graphql/types/index.ts new file mode 100644 index 0000000000000..30207a61dfdd0 --- /dev/null +++ b/examples/with-apollo-neo4j-graphql/types/index.ts @@ -0,0 +1,19 @@ +interface Person { + name: string + born: number + movies: Movies +} + +interface Movie { + title: string + tagline: string + released: number + actors: Actors + directors: Directors +} + +export type Movies = Partial[] + +export type Actors = Partial[] + +export type Directors = Partial[] diff --git a/examples/with-apollo-neo4j-graphql/util/neo4j.js b/examples/with-apollo-neo4j-graphql/util/neo4j.ts similarity index 85% rename from examples/with-apollo-neo4j-graphql/util/neo4j.js rename to examples/with-apollo-neo4j-graphql/util/neo4j.ts index 18ad7163fec5a..db7a3f3d25cb7 100644 --- a/examples/with-apollo-neo4j-graphql/util/neo4j.js +++ b/examples/with-apollo-neo4j-graphql/util/neo4j.ts @@ -1,6 +1,7 @@ import neo4j from 'neo4j-driver' +import type { Driver } from 'neo4j-driver' -let driver +let driver: Driver const defaultOptions = { uri: process.env.NEO4J_URI,