https://github.com/fluree/js-react-wrapper
React wrapper for Fluree's JavaScript query engine
https://github.com/fluree/js-react-wrapper
Last synced: 5 months ago
JSON representation
React wrapper for Fluree's JavaScript query engine
- Host: GitHub
- URL: https://github.com/fluree/js-react-wrapper
- Owner: fluree
- Created: 2020-04-19T10:45:37.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-04-23T02:12:21.000Z (about 2 years ago)
- Last Synced: 2025-12-13T00:31:45.030Z (7 months ago)
- Language: JavaScript
- Size: 6.29 MB
- Stars: 8
- Watchers: 10
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @fluree/react-wrapper
> Fluree JavaScript DB wrapper for React apps
[](https://www.npmjs.com/package/@fluree/react-wrapper)
## Install
```bash
npm install --save @fluree/react-wrapper
```
## Usage
> flureeworker.js is included in the module src `./node_modules/@fluree/js-react-wrapper/src/flureeworker.js`
> to be put in your public folder for the web worker to function
```jsx
import React, { Component } from "react";
import {
FlureeConnect,
FlureeProvider,
flureeQL
} from "@fluree/js-react-wrapper";
const flureeConnection = new FlureeConn({
servers: "http://localhost:8090", // point to URL of running Fluree transactor or peer server
ledger: "fluree/demo", // default ledger (database) on the server to use for this connection
workerUrl: "/flureeworker.js" // location of the fluree web worker javascript file
});
const App = () => {
return (
Example of rendering a React componet with Fluree data:
);
};
// PredicateItem is a standard React component that will display a single predicate item from the db's schema
function PredicateItem({ predicate }) {
return (
{predicate.name} {predicate.doc}
type: {predicate.type}
unique?: {predicate.unique === true ? "true" : "false"}
index?: {predicate.index === true ? "true" : "false"}
multi-cardinality?: {predicate.multi === true ? "true" : "false"}
component?: {predicate.component === true ? "true" : "false"}
);
}
// ShowPredicates is a standard React component that will display a list of Predicates passed in
// as the React prop of data.result (Fluree injects all query data into a component's 'data' prop)
function ShowPredicates({ data }) {
const predicateNames = data.result.map(predicate => (
));
return (
Predicate Names are:
{predicateNames}
);
}
// wrap the ShowPredicates standard React component with a Fluree query, it will inject the status
// and results as the 'data' prop. Render this component instead of ShowPredicates. This will also
// make ShowPredicates "real-time", if there are any database updates that would affect this
// component's query results it will automatically re-render
const ShowPredicatesFluree = flureeQL({
select: ["*"],
from: "_predicate"
})(ShowPredicates);
export default App;
```
## Query types
Queries passed to flureeQL can either be:
1. A standard query as in the example above
2. A query with variables that can be brought in dynamically by the mounted component
3. A function that is passed the component's props and context and must return a valid query
### Standard queries
```jsx
// standard React component (knows nothing of Fluree)
function FavoriteColor({ data }) {
// Fluree injects `data` object into props, query result is at data.result
return (
Favorite color for {data.result.username} is: {data.result.favoriteColor}
);
}
// wrap standard React component with Fluree query, results will be injected
// 'basic' style query shown below
const FavoriteColorFluree = flureeQL({
selectOne: ["username", "favoriteColor"],
from: ["_user/username", "bob@example.com"]
})(FavoriteColor);
// identical query as above, but with 'analytical' query style
const FavoriteColorFlureeAlt = flureeQL({
selectOne: { "?s": ["username", "favoriteColor"] },
where: [["?s", "_user/username", "bob@example.com"]]
})(FavoriteColor);
```
### Queries with variables
Queries that will be used in multiple contexts should use
[query variables](https://docs.flur.ee/docs/query/analytical-query#variables),
allowing the query to be reusable (this also makes query parsing slightly more efficient).
```jsx
// for any query vars that are null, The React component's props will
// be examined to see if there is a property with the same name as the missing
// var (minus the leading '?') and it will be substituted.
const FavoriteColorFluree = flureeQL(
{
selectOne: {"?s": ["username", "favoriteColor"]},
where: [["?s", "_user/username", "?username"]], // ?username here is a query variable
vars: {"?username": null} // note ?username is null, will look at React props for presence of 'username'
}
)(FavoriteColor);
// this parent component will display our Fluree-enabled component
function ParentComponent() {
return (
Two users, same reusable component with different username property:
);
}
```
### Queries using a function
The third query alternative is to use a function to return a query instead of specifying it directly.
The function will be called with two arguments, the React props and context
(just like the constructor function of a React.Component).
```jsx
// Same example as above, but query written as a function
function faveColorQuery(props, context) {
// return any valid query
return {
selectOne: {"?s": ["username", "favoriteColor"]},
where: [["?s", "_user/username", props.username]] // we can embed the value directly in the query
}
}
const FavoriteColorFluree = flureeQL(faveColorQuery)(FavoriteColor);
// this parent component will display our Fluree-enabled component
function ParentComponent() {
return (
Two users, same reusable component with different username property:
);
}
```
## License
MIT © [Fluree PBC](https://github.com/fluree)