Lit-Element Apollo Neo4j
- noun: a deviation from the perpendicular; an inclination.
- adjective: (of an industry or company) efficient and with no waste.
- verb: be in or move into a sloping position.
The LEANstack project exists to serve as an evolving knowledge base of resources and examples for using the following resources together:
-
🌐 LitElement web components and tools from the Polymer Project for building Progressive Web Apps.
-
🚀 Apollo GraphQL client and server resources.
-
🌎 Neo4j graph databases using neo4j-graphql-js from the GRANDstack project to augment and translate GraphQL to Cypher.
This repository begins as a modified combination of the following two starter kits:
-
The root directory was generated using the
npx create-grandstack-appscript from the GRANDstack Starter Kit. -
The
/webdirectory was generated using thenpm init @apollo-elementsscript from the Apollo Elements App Generator.
Follow these instructions for installing Neo4j Desktop. The expected the username (neo4j) and password (letmein) are the same as those set in the environment variables of the GRANDstack starter kit.
Run npm install in the root, /api, and /web directories.
Run npm run start in the root directory to start an Apollo Server with a Neo4j-GraphQL API.
Run npm run start in /web to start Web Dev Server and launch the web application.
The below UI should load once the application is launched in /web. If you're Neo4j database is running and your is api started, you should see nodes appear in a force-graph when you press the CREATE A button.
Using the Neo4j Browser in Neo4j Desktop, you can view a graph of the nodes created with the A node label:
The Apollo Elements project develops many invaluable resources for using Apollo client with LitElement. Typescript definitions are available using the @apollo-elements/interfaces package.
When writing class-based LitElement components, you can use @apollo-elements/lit-apollo to extend base classes for using Apollo client.
Everything from the LitElement API is also exported, including the following TypeScript class decorators, and template tags for html and css.
- @customElement - Define a custom element.
- @eventOptions - Add event listener options for a declarative event listener.
- @property and @internalProperty - Define properties.
- @query, @queryAll, and @queryAsync - Create a property getter that returns specific elements from your component’s render root.
- @queryAssignedNodes - Create a property getter that returns the children assigned to a specific slot.
You can write functional LitElement components using Haunted, which provides hooks such as useState, useEffect, etc. To use Apollo client with functional components, the @apollo-elements/haunted package exports hooks such as useQuery, similar to those for using Apollo with React.
The @apollo-elements/components package provides LitElement web components that can be used in the html template of either class-based or functional components: <apollo-client> and <apollo-mutation>.
The integration between GraphQL and the Cypher Query Language used by Neo4j is driven by the neo4j-graphql-js package from the GRANDstack project.
The Web Dev Server from the Modern Web project is used to support buildless development with live-reload while using TypeScript and Rollup. It is the successor of the es-dev-server from the Open Web Components project.
To support using @web/dev-server with Apollo Elements, this configuration is used for the web-dev-server.config.mjs file.