react-relay-local-query

Local queries for react-relay.
For querying local data without sending a request to the server (local state management).

Provides functionality (likely) found in the _next_ build of relay:
https://github.com/facebook/relay/blob/master/packages/react-relay/ReactRelayLocalQueryRenderer.js.

Note that the Relay compiler still requires you to include a server schema field in the query.
Ideally, you would use a schema agnostic field, like an introspection field.

Installation

Using npm:

$ npm install react-relay-local-query

Using yarn:

$ yarn add react-relay-local-query

Then with a module bundler like webpack, use as you would anything else:

``js
// Using ES6 Modules
import { useLocalQuery, LocalQueryRenderer } from 'react-relay-local-query';
// using CommonJS modules
const useLocalQuery = require('react-relay-local-query').useLocalQuery;
const LocalQueryRenderer = require('react-relay-local-query')
.LocalQueryRenderer;
`

Usage

This package contains two modules.
LocalQueryRenderer and useLocalQuery.

LocalQueryRenderer is used just like a regular QueryRenderer.

`jsx
// App.js
import React from 'react';
import { LocalQueryRenderer } from 'react-relay-local-query';

function MyApp({ children }) {
return (
variables={{}}
environment={environment}
query={graphql
query AppQuery {
__typename
settings {
title
}
}
}
render={({ props }) => {
return

;
}}
/>
);
}
`

useLocalQuery is the hook implementation of LocalQueryRenderer.

`jsx
// App.js
import React from 'react';
import { useLocalQuery } from 'react-relay-local-query';

function MyApp({ children }) {
const data = useLocalQuery({
environment,
query: graphql
query AppQuery {
__typename
settings {
title
}
}
,
});

return

;
}
`

Unlike QueryRenderer and fetchQuery, LocalQueryRenderer and useLocalQuery` return a data snapshot on the initial render.

Credits

react-relay-local-query is built and maintained by babangsund.

@blog.
@github.
@twitter.