Cached QueryRender refreshing

[Felix-N]

Hi,

I'm just testing the library (it sounds perfect), but have some strange behavior I do not understand:

When I'm using any offline mode, the QueryRenderer does not update the view correctly. Using a network request works just fine.

Basically only 'Loading' is shown, as if the props never populate (but the log shows differently)

Here is the sample I am using:

import React from 'react';
import './App.css';
import _ from 'lodash';

import ReactEnvironment from './ReactEnvironment';
import {NETWORK_ONLY, STORE_ONLY, STORE_OR_NETWORK, STORE_THEN_NETWORK} from 'react-relay-offline';


import graphql from 'babel-plugin-relay/macro';
import {QueryRenderer} from 'react-relay-offline';


function App() {
  return (
    <div className="App">
      <header className="App-header">
      <QueryRenderer
          environment={ReactEnvironment}
          fetchPolicy={'store-or-network'}
          variables={{}}
          query={graphql`
            query AppQuery {
              auftraggeber {
                edges {
                  node {
                    id
                    name
                  }
                }
              }
            }
          `}
          render={({props, error, retry, cached}) => {
            console.log('props')
            console.log(props)
            console.log('cached')
            console.log(cached)
            if (props) {
              let rows = [];
              _.each(props.auftraggeber.edges, (ele) => {
                rows.push(<p key={ele.node.id}>{ele.node.name} </p>);
              })
              console.log('returning rows..')
              console.log(rows)
              return <div>{rows}</div>;
            } else {
              return <div>Loading</div>;
            }

            // return (
            //   <button onClick={retry} className="refetch">
            //     Retry
            //   </button>
            // );
          }}
        />

      </header>
    </div>
  );
}

export default App;

The logging comes out a bit weird as well (pure offline log here) showing cached false in the end:
props

App.js:37 null
App.js:40 cached
App.js:41 false
App.js:36 props
App.js:37 null
App.js:40 cached
App.js:41 false
ReactEnvironment.js:45 start offline []
ReactEnvironment.js:50 finish offline undefined []
App.js:36 props
App.js:37 {auftraggeber: {…}}auftraggeber: edges: (2) [{…}, {…}]0: {node: {…}}1: {node: {…}}length: 2__proto__: Array(0)proto: Object__proto__: Object
App.js:40 cached
App.js:41 true
App.js:48 returning rows..
App.js:49 (2) [{…}, {…}]
App.js:36 props
App.js:37 {auftraggeber: {…}}auftraggeber: edges: (2) [{…}, {…}]proto: Object__proto__: Object
App.js:40 cached
App.js:41 false
App.js:48 returning rows..
App.js:49 (2) [{…}, {…}]

[morrys]

Hi @Felix-N,
did you use the useRestore hook correctly? I recommend you read this issue #33

[Felix-N]

Hi Morrys,

I didn't use any hooks, but only the code above.
That said I was under the impression that useRestore is only needed if anything is done outside of the QueryRenderer

[Felix-N]

Using the useRestore hook avoids the issue. Is it 'mandatory' ? I didn't get that from the documentation at all

[morrys]

Hi @Felix-N,
here the useRestore is documented.
generally only in web applications with SSR it should not be used.

[Felix-N]

Thanks Morrys,
I've read it in the beginning but didn't understood the implication of it.

Again thanks a lot for the quick responsesand great library.