GRAND (GraphQL, React, Apollo, Neo4j Database) Stack seed project with built in Local Auth and Facebook OAuth, and sample User GQL types/queries/mutations.
-
Create a
.env.localfile in your./clientdirectory with the following env variables:GRAPHQL_URI= *example: http://localhost:8000/graphql*FB_AUTH_URI= *example: http://localhost:8000/login-facebook* -
Create
.envfile in your./serverdirectory with the following env variablesCLIENT_URI= *example: http://localhost:3000 (default for a create react app)*NEO4J_URI= *example: bolt://localhost:8687*(this can be a local instance of neo4j or a neo4j sandbox URI)NEO4J_USER= *example: neo4j*NEO4J_PASSWORD= *example: password*GRAPHQL_LISTEN_PORT= *example: 8000*GRAPHQL_URI= *example: http://localhost:8000*(Graphiql will be available at this URI +/graphql)JWT_SECRET= *example: generated secret*FB_ID= * Get this from https://developers.facebook.com*FB_SECRET= *Get this from https://developers.facebook.com*FB_CALLBACK_URI= *example: http://localhost:8000/login-facebook/callback* -
Install dependencies for both server and client by running
npm (or yarn) run install-allin the root of the project. -
Start up both servers by running
npm startin the root of the project`
- There is a schema.graphql file that contains all of tha app's type definitions and is run through a schema generator that converts Cypher queries (indicated by the
@cypheror@relationshipdirectives) into valid computed properties. - You can turn on automatic mutation generation on
line 44of theserver/src/index.jsfile and mutation online 45(this will generate queries for all of your defined types, and add/update/delete mutations for all of your types as well) though I personally reccomend writing your own resolvers or computed properties using the directives mentioned above as it will give you more fine grained control over your application. - There is Local already built in to the application, you can see this in action in the
server/src/resolvers.jsfile. Facebook OAuth is also built in and can be seen in theserver/src/index.jsfile! - You can create even more complex queries and mutations by leverage in the
neo4jgraphqlmethod that is exposed byneo4j-graphql-jspackage by mutating data passed in to a query/mutation before it hits your neo4j database, you can see this inserver/src/resolvers.jsonlines 8-12where passwords are being hashed and salted bybcrypt
- This is just a basic Create React App (with typescript) that can be configured to your heart's content. (If you're unfamiliar with how to do this there are many resources available online.
- The app is wrapped in an
ApolloProvidermaking your GraphQL server queriable throughout the app. (This happens inclient/src/components/App.tsx - The app is also wrapped in a
BrowserRouterfromreact-routerand you can define your routes as you see fit.- There is an authenticated route at
/that can only be accessed once a user is logged in. - There is a
/registerroute that has some default styled form fields that handle user registration and a/loginroute to authenticate a user.
- There is an authenticated route at