I have this code:

I don't understand:

1) How to re-render() Menu ponent after:

this.props.client.query({
  query: CURRENT_USER_QUERY,
  fetchPolicy: "network-only"
});

If I login() I expect my Menu ponent to re-render() itself. But nothing. Only if I click on the Home link it re-render() itself. I suspect because I'm using this to render it:

<Route ponent={Menu} />

for embrace it in react-router props. Is it wrong?

Plus, if inspect this.props of Menu after login() I see loading: true forever. Why?

2) How to prevent Menu ponent to query if not authenticated (eg: there isn't a token in localStorage); I'm using in Menu ponent this code:

export default graphql(CURRENT_USER_QUERY)(Menu);

3) Is this the right way to go?

I have this code: https://codesandbox.io/s/507w9qxrrl

I don't understand:

1) How to re-render() Menu ponent after:

this.props.client.query({
  query: CURRENT_USER_QUERY,
  fetchPolicy: "network-only"
});

If I login() I expect my Menu ponent to re-render() itself. But nothing. Only if I click on the Home link it re-render() itself. I suspect because I'm using this to render it:

<Route ponent={Menu} />

for embrace it in react-router props. Is it wrong?

Plus, if inspect this.props of Menu after login() I see loading: true forever. Why?

2) How to prevent Menu ponent to query if not authenticated (eg: there isn't a token in localStorage); I'm using in Menu ponent this code:

export default graphql(CURRENT_USER_QUERY)(Menu);

3) Is this the right way to go?

• javascript
• reactjs
• graphql
• apollo
• react-apollo

Share Improve this question Follow edited Dec 9, 2017 at 19:50 Dane 9,59355 gold badges3737 silver badges5858 bronze badges asked Dec 5, 2017 at 13:58 user4412054user4412054 5

• <Route ponent={Menu} /> I didn't seem to find this line of code.? – Dane Commented Dec 9, 2017 at 19:34
• Is mented because I'm trying to use it without. – user4412054 Commented Dec 9, 2017 at 19:35
• @Dane, if I remove that line and use just <Menu /> it doesn't re-render at all. – user4412054 Commented Dec 9, 2017 at 19:35
• I reset the code as in question. – user4412054 Commented Dec 9, 2017 at 19:41
• About (2), you can easily skip queries as explained here: apollographql./docs/react/basics/queries.html#graphql-skip – cfraser Commented Dec 13, 2017 at 16:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +100

First, let me answer your second question: You can skip an operation using the skip query option.

export default graphql(CURRENT_USER_QUERY, {
  skip: () => !localStorage.get("auth_token"),
})(Menu);

The problem now is how to re-render this ponent when the local storage changes. Usually react does not listen on the local storage to trigger a re-render, instead a re-render is done using one of this three methods:

1. The ponent's state changes
2. The parent of the ponent re-renders (usually with new props for the child)
3. forceUpdate is called on the ponent

(Note that also a change of a subscribed context will trigger a re-render but we don't want to mess around with context ;-))

You might want to go with a bination of 2. and 3. or 1. and 2. In your case it can be enough to change the route (as you do in the login function). If this does not work you can call this.forceUpdate() on the App ponent after Login using a callback property on <Login onLogin={() => this.forceUpdate() } />.

EDITED

1) I just created new link https://codesandbox.io/s/0y3jl8znw

You want to fetch the user data in the ponentWillReceiveProps method:

  ponentWillReceiveProps() {
    this.props.client.query({query: CURRENT_USER_QUERY})
    .then((response) => {
      this.setState({ currentUser: response.data.currentUser})
    })
    .catch((e) => {
      console.log('there was an error ', e)
    })
  }

This will make the ponent re-render.

2) Now when we moved the query call in the ponent's lifecycle method we have full control over it. If you want to call the query only if you have something in localstorage you just need to wrap the query in a simple condition:

  ponentWillReceiveProps() {
    if(localstora.getItem('auth_token')) {
      this.props.client.query({query: CURRENT_USER_QUERY})
      .then((response) => {
        this.setState({ currentUser: response.data.currentUser})
      })
      .catch((e) => {
        console.log('there was an error ', e)
      })
    }
  }

3) You want to store the global application state in redux store. Otherwise you will have to fetch the user info every time you need to work with it. I would remend to define a state in you App ponent and store all the global values there.