Skip to content

Commit

Permalink
Merge pull request #64 from morrys/release-3.0.0
Browse files Browse the repository at this point in the history
support relay-runtime v10.x.x
  • Loading branch information
morrys authored Jan 19, 2021
2 parents 164fa7e + 8d228ec commit 4e88bdc
Show file tree
Hide file tree
Showing 16 changed files with 1,396 additions and 1,370 deletions.
66 changes: 32 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,56 +209,59 @@ const environment = new Environment({ network, store }, persistOfflineOptions);
```ts
import { Store } from "react-relay-offline";
import { CacheOptions } from "@wora/cache-persist";
import { CacheOptionsStore } from "@wora/relay-store";
import { StoreOptions } from "@wora/relay-store";

const persistOptionsStore: CacheOptionsStore = { defaultTTL: 10 * 60 * 1000 }; // default
const persistOptionsRecords: CacheOptions = {}; // default
const persistOptionsStore: CacheOptions = { };
const persistOptionsRecords: CacheOptions = {};
const relayStoreOptions: StoreOptions = { queryCacheExpirationTime: 10 * 60 * 1000 }; // default
const recordSource = new RecordSource(persistOptionsRecords);
const store = new Store(recordSource, persistOptionsStore);
const store = new Store(recordSource, persistOptionsStore, relayStoreOptions);
const environment = new Environment({ network, store });
```

## QueryRenderer

- Add "cached" property in render function
- Add "ttl" property in order to change default ttl in store
- `fetchPolicy` determine whether it should use data cached in the Relay store and whether to send a network request. The options are:
- `store-or-network` (default): Reuse data cached in the store; if the whole query is cached, skip the network request
- `store-and-network`: Reuse data cached in the store; always send a network request.
- `network-only`: Don't reuse data cached in the store; always send a network request. (This is the default behavior of Relay's existing `QueryRenderer`.)
- `store-only`: Reuse data cached in the store; never send a network request.
## useQuery

```ts
import { QueryRenderer } from 'react-relay-offline';

<QueryRenderer
environment={environment}
query={query}
variables={{}}
fetchPolicy='store-or-network'
ttl={100000}
render={({ props, error, retry, cached }) => {
```
`useQuery` does not take an environment as an argument. Instead, it reads the environment set in the context; this also implies that it does not set any React context.
In addition to `query` (first argument) and `variables` (second argument), `useQuery` accepts a third argument `options`.

## useQuery
**options**

`fetchPolicy`: determine whether it should use data cached in the Relay store and whether to send a network request. The options are:
* `store-or-network` (default): Reuse data cached in the store; if the whole query is cached, skip the network request
* `store-and-network`: Reuse data cached in the store; always send a network request.
* `network-only`: Don't reuse data cached in the store; always send a network request. (This is the default behavior of Relay's existing `QueryRenderer`.)
* `store-only`: Reuse data cached in the store; never send a network request.

`fetchKey`: [Optional] A fetchKey can be passed to force a refetch of the current query and variables when the component re-renders, even if the variables didn't change, or even if the component isn't remounted (similarly to how passing a different key to a React component will cause it to remount). If the fetchKey is different from the one used in the previous render, the current query and variables will be refetched.

`networkCacheConfig`: [Optional] Object containing cache config options for the network layer. Note the the network layer may contain an additional query response cache which will reuse network responses for identical queries. If you want to bypass this cache completely, pass {force: true} as the value for this option. **Added the TTL property to configure a specific ttl for the query.**

`skip`: [Optional] If skip is true, the query will be skipped entirely.

`onComplete`: [Optional] Function that will be called whenever the fetch request has completed

```ts
import { useQuery } from "react-relay-offline";
const networkCacheConfig = {
ttl: 1000
}
const hooksProps = useQuery(query, variables, {
networkCacheConfig: cacheConfig,
networkCacheConfig,
fetchPolicy,
ttl
});
```

## useLazyLoadQuery

```ts
import { useQuery } from "react-relay-offline";
const networkCacheConfig = {
ttl: 1000
}
const hooksProps = useLazyLoadQuery(query, variables, {
networkCacheConfig: cacheConfig,
networkCacheConfig,
fetchPolicy,
ttl
});
```

Expand All @@ -283,11 +286,6 @@ const isRehydrated = useRestore(environment);
import { fetchQuery } from "react-relay-offline";
```

## Mutation
```ts
import { commitMutation, graphql } from "react-relay-offline";
```

## Detect Network

Expand Down Expand Up @@ -366,7 +364,7 @@ to notify any updated data in the store.

## Requirement

- Version >=8.0.0 of the react-relay library
- Version >=10.1.0 of the relay-runtime library
- When a new node is created by mutation the id must be generated in the browser to use it in the optimistic response

## License
Expand Down
Loading

0 comments on commit 4e88bdc

Please sign in to comment.