Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cached QueryRender refreshing #49

Closed
Felix-N opened this issue Aug 3, 2020 · 5 comments
Closed

Cached QueryRender refreshing #49

Felix-N opened this issue Aug 3, 2020 · 5 comments

Comments

@Felix-N
Copy link

Felix-N commented Aug 3, 2020

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
Copy link
Owner

morrys commented Aug 3, 2020

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

@Felix-N
Copy link
Author

Felix-N commented Aug 3, 2020

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
Copy link
Author

Felix-N commented Aug 3, 2020

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

@morrys
Copy link
Owner

morrys commented Aug 4, 2020

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

@Felix-N
Copy link
Author

Felix-N commented Aug 4, 2020

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.

@Felix-N Felix-N closed this as completed Aug 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants