https://github.com/fluree/fql-react
React client for Fluree QL
https://github.com/fluree/fql-react
Last synced: 5 months ago
JSON representation
React client for Fluree QL
- Host: GitHub
- URL: https://github.com/fluree/fql-react
- Owner: fluree
- License: epl-1.0
- Created: 2017-01-22T13:30:14.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2021-03-04T23:43:48.000Z (over 5 years ago)
- Last Synced: 2025-08-09T06:36:20.621Z (11 months ago)
- Language: JavaScript
- Size: 42 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Fluree
## Fluree Client for React + FlureeQL
### Usage:
```js
import {
ReactConnect,
FlureeProvider,
flureeQL
} from 'fql-react';
const conn = ReactConnect({
url: "http://instance-domain.flur.ee",
instance: "instance name",
token: "a token"
});
const userQuery = {
vars: ["username"],
graph: [
["user" {id: ["username", "?username"]}
["username", "doc", {person: ["nameGiven", "nameFamily"]}]]
]
};
const UserComponent = ({username, data}) => (
UserComponent ID: {data.id}
Error: {JSON.stringify(data.error)}
Warnings: {JSON.stringify(data.warning)}
username Provided: {username}
username from result: {data.result.user && data.result.user.username}
Given name: {data.result.user && data.result.user.person && data.result.user.person.nameGiven}
);
const UserComponentWithData = flureeQL(userQuery)(UserComponent);
const SampleProviderComponent = () => (
);
export default SampleProviderComponent;
```
### Usage with graphql:
```js
import gql from fql-graphql;
import {
ReactConnect,
FlureeProvider,
flureeQL
} from 'fql-react';
const conn = ReactConnect({
url: "http://instance-domain.flur.ee",
instance: "instance name",
token: "a token"
});
const userQuery = gql`
query UserQuery($username: String) {
user (id: ["username", $username) {
username
doc
person {
nameGiven
nameFamily
}
}
}
`;
const UserComponent = ({username, data}) => (
UserComponent ID: {data.id}
Error: {JSON.stringify(data.error)}
Warnings: {JSON.stringify(data.warning)}
username Provided: {username}
username from result: {data.result.user && data.result.user.username}
Given name: {data.result.user && data.result.user.person && data.result.user.person.nameGiven}
);
const UserComponentWithData = flureeQL(userQuery)(UserComponent);
const SampleProviderComponent = () => (
);
export default SampleProviderComponent;
```