https://github.com/conorhastings/routeql
backend agnostic, graphql style colocation of data requests in React
https://github.com/conorhastings/routeql
Last synced: 4 months ago
JSON representation
backend agnostic, graphql style colocation of data requests in React
- Host: GitHub
- URL: https://github.com/conorhastings/routeql
- Owner: conorhastings
- Created: 2018-07-29T01:55:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-24T16:33:16.000Z (almost 7 years ago)
- Last Synced: 2025-07-04T08:43:44.264Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 292 KB
- Stars: 122
- Watchers: 7
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - routeql
README
## RouteQL
**note** - this project is in it's early stages and may change API.
RouteQL takes the idea of expressive colocated querying data from the frontend in tools like GraphQL (we even use the graphql query structure and parser) and the idea of a `Query` component or `routeql` higher order component from tools like Apollo and applies them to make these queries backend agnostic. RouteQL transforms queries into route requests, allowing you to use props to determine route and query parameters.
This allows for the expressiveness of a colocated GraphQL query without the need for any specific backend. This project is still in the very early stages but you can see some code examples below and a live example here. You can also read more about the idea behind the project here
The arguments to the Higher Order Component are the same as the props to the query Component and can be seen below. In the future I hope to follow the lead of apollow allowing creation of custom network interfaces.
- *query* - a string query that is parsable by the graphql parser. The top level of each entity (person, post, todos) below will inform the route that the query hits. So
```jsx
query {
person {
id
}
}
```
would hit `/person` and fruther arguments would inform further path considerations.
- **apiPrefix** - defaults to `""` , use this if you would like each route to have some starting route parameters, an apiPrefix of `/api/v1` with the above query would hit `/api/v1/person`
- **getRequestData** - called once for each each request, returns an object with keys `params` and queryParams. In the above to achieve something like `/person/1` one would use `{ params: [1], queryParams: {} };`
- **getDataFromResponseBody** - optional parameter that is used to transform the response body from the server into an object or array of objects in which each object contains the fields requested (missing fields will be passed as null)
- **pollInterval** - an optional parameter that will cause the component to make requests for new data ever n milliseconds. If you wanted to refresh every 2 seconds you could pass a pollInterval of `2000`
- **cachePolicy** - this project uses the fetch-dedupe package under the hood which handles caching, you can see documentation on options here. We use the same defaults, with the exception that using pollInterval or refetch will always hit the network.
### Higher Order Component
```jsx
class App extends Component {
render() {
return this.props.loading ? (
Loading Data
) : (
RouteQL Populated Props
Person Query
{Object.entries(this.props.person).map(([key, value]) => (
-
{key}: {value}
))}
Post Query
{Object.entries(this.props.post).map(([key, value]) => (
-
{key}: {typeof value === "object" && value !== null
? JSON.stringify(value)
: value}
))}
Todo List Query
{this.props.todos.map(todo => -
{todo.todo}
)}
);
}
}
export default routeql({
query: `
query {
person {
id
name
type
},
post {
id
title
body
metadata {
author
}
},
todos {
id,
todo,
complete
}
}
`,
getRequestData: ({ props, routeName }) => {
switch (routeName) {
case "person": {
return { params: [1], queryParams: {} };
}
case "post": {
return { params: [2], queryParams: {} };
}
default: {
return { params: [], queryParams: {} };
}
}
}
})(App);
```
### Query Component With function as children
```jsx
function RenderPropQuery() {
return (
{
switch (routeName) {
case "person": {
return { params: [1], queryParams: {} };
}
case "post": {
return { params: [2], queryParams: {} };
}
default: {
return { params: [], queryParams: {} };
}
}
}}
>
{({ loading, person, post, todos }) =>
loading ? (
Loading Data
) : (
RouteQL Populated Props
Person Query
{Object.entries(person).map(([key, value]) => (
-
{key}: {value}
))}
Post Query
{Object.entries(post).map(([key, value]) => (
-
{key}:{" "}
{typeof value === "object" && value !== null
? JSON.stringify(value)
: value}
))}
Todo List Query
{todos.map(todo => (
-
{" "}
{todo.todo}
))}
)
}
);
}
```