React-apollo: How to have mounted components re-fetch query data?

[TSMMark]

pollInterval is great, but it does not solve my case. I would like to trigger a re-fetch manually, after a certain event, like a redux action. I have been digging around quite a bit and can not find out how to accomplish this.

[ARMGAMES]

http://dev.apollodata.com/react/receiving-updates.html
Refetch - this.props.data.refetch();

[TSMMark]

@ARMGAMES Thanks. The problem is, I need to trigger the refetch from another component which is not a child of the component which contains the query. I think I have figured a way to do it, using a redux action dispatch from the component which triggers the refetch, and a componentWillReceiveProps on the component which contains the query.

[AdamBrodzinski]

@TSMMark i've used a global exported object that serves as a container for these refetch handles. Then you can import it and just call refetchHandles.yourFeed() and it'll refresh.

// organize global refetch handles
// example:
//  refetchHandles.feed = props.data.refetch;
//  refetchHandles.feed();
export const refetchHandles = {
  mainFeed: null,
};

[andr11111]

@ARMGAMES , @TSMMark could you guys elaborate a bit please? I'm struggling with the similar problem. I have several components that work with the same type of objects ('Groups' in my case). For example, I have a component that adds a group (AddGroupComponent) by triggering a mutation and a table that displays the groups (GroupTableComponent). The table has sorting and filtering, therefore the AddGroupComponent has no way of refetching the table, because it doesn't even know the current values of the sort and filter variables. So when I add a group using AddGroupComponent how do I tell GroupTableComponent to refetch itself while keeping the current values of the sort and filter?

[TSMMark]

@andrei-anisimov it's hard to answer that without knowing what tools you are using. I'm not sure if there are better ways with apollo 2.x, but we have found some success using a custom redux store which we named queryRefetches. Here is the reducer code, I hope it is useful:

export default function (state?: State = initialState, action: Action): State {
  // reducer was added after the app was in use, we check for loading of redux state as well
  switch (action.type) {
  case 'REQUEST_QUERY_REFETCH': {
    state = Object.assign({}, state)
    const queryName = action.payload
    state[queryName] = state[queryName] ? state[queryName] + 1 : 1
    return state
  }
  default:
    return state
  }
}

Consume the reducer in any component that has a query you want to refetch:

componentWillReceiveProps = (nextProps: Props) => {
  if (this.props.refetchRequests !== nextProps.refetchRequests && this.props.refetch) {
    this.props.refetch()
  }
}

// ...

const mapStateToProps = (state: StoreState) => ({
  refetchRequests: state.queryRefetches.notifications
})

[vojto]

These two solutions described above both work, but they're not ideal.

It's been over a year, is there any better solution by now?

[kettanaito]

Using query hooks like useQuery or useLazyQuery returns you a refetch function that you can execute on demand (i.e. after dispatching a Redux action).

import { useQuery } from '@apollo/react-hooks'

const MyComponent = () => {
  const { data, loading, refetch } = useQuery(MY_QUERY)
  // const [query, { data, loading, refetch }] = useLazyQuery(MY_QUERY)

  const handleButtonClick = () => {
    // I assume your Redux action returns a promise, so you can await it
    dispatchReduxAction().then(refetch)
  }

  return <button onClick={handleButtonClick}>Click me</button>
}

[bwoodlt]

@kettanaito thanks for this! So you were able to use hook inside your component? I'm not using hook, im using the client.query directly. I'm also using redux for local state.
I cant seem to use hook inside my redux action though. If you have some ideas how to achieve this please.