Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adam-cowley/graphapp-starter-react

A Graph App Starter Kit for React - Clone, connect and code...
https://github.com/adam-cowley/graphapp-starter-react

cypher cypher-query-language hacktoberfest javascript neo4j neo4j-database react reactjs typescript

Last synced: 4 days ago
JSON representation

A Graph App Starter Kit for React - Clone, connect and code...

Awesome Lists containing this project

README 

        
# Graph App Starter - React














This repository is your starter kit for [building a Graph App](https://neo4j.com/developer/graph-apps/building-a-graph-app/) for [Neo4j Desktop](https://neo4j.com/download/).  Feel free to fork this project.



## Getting Started



The repository uses the [`use-neo4j` hooks](https://github.com/adam-cowley/use-neo4j) to communicate with Neo4j using [Cypher Statements](https://neo4j.com/developer/cypher/).  This is a package intended to speed up the development by reducing the amount of boilerplate code required.  **It is not intended for public-facing/production applications used by external users.**



### Provider



The `Neo4jProvider` is included in in `src/index.ts` and is used to wrap the app.  When you first run the app, you will be presented with a login form which is used to create a driver within the `Neo4jContext`.  This context (exported from `use-neo4j`) can then be used to obtain the driver instance.



You can default the scheme, host, port, username, password or database



Alternatively you can pass a driver instance to the `Neo4jProvider` if you know the Neo4j credentials up front.



```tsx

import { Neo4jProvider, createDriver } from 'use-neo4j'



const driver = createDriver('neo4j', 'localhost', 7687, 'neo4j', 'letmein')



ReactDOM.render(

  

    

      

    

  ,

  document.getElementById('root')

);

```



### Querying Neo4j



`use-neo4j` provides `useReadCypher` and `useWriteCypher` hooks for querying Neo4j.  Both hooks return a `Neo4jResultState` which provides helpers for accessing the query state and results.



```ts

useReadCypher(cypher: string, params?: Record, database?: string): Neo4jResultState

```



Example code:



```tsx

function MyComponent() {

    const query = `MATCH (m:Movie {title: $title}) RETURN m`

    const params = { title: 'The Matrix' }



    const { loading, first } = useReadCypher(query, params)



    if ( loading ) return (
Loading...
)



    // Get `m` from the first row

    const movie = first.get('m')



    return (

        
{movie.properties.title} was released in {movie.properties.year}


    )

}

```



For more information, [check the `use-neo4j` README](https://github.com/adam-cowley/use-neo4j).



## Testing Your Graph App



To test your Graph App, open up Neo4j Desktop and navigate to the **Application Settings** tab.  Under *Developer Tools*, check *Enable development mode*, enter `http://localhost:3000` (or the URL to this app from `yarn start`) into the Entry Point and `/` into the Root Path.



Next, open the *Action Bar* using Ctrl+K on Windows/Linux or CMD+K on a Mac and start to type `Development App` - hit enter when **Open Development App** is highlighted.



## Building your Graph App



To build your Graph App, use the `yarn build` command.  This will generate a `dist/` folder with the built assets.  Running `npm pack` will generate a `.tgz` file which can be dragged into the Install form at the bottom of the **Graph Apps** pane.



## Releasing your Graph App



You can publish your Graph App to `npm` or share the `.tgz` file with your colleagues.



[Let us know about your app on the Neo4j Community Site](https://community.neo4j.com/c/neo4j-graph-platform/graph-apps/95) or if you would like a link added to [The Graph App Gallery](https://install.graphapp.io/).