Search code examples
reactjsrelayjsreact-relay

refetchContainer gives same results with or without force in refetchOptions in Relay Modern


In Relay Modern refetchContainer gives same results with refetchOptions: { force: true } and refetchOptions: { force: false }.

I have a refetch container like following:

export default createRefetchContainer(radium(UserPicker), graphql`
  fragment UserPicker_company on Company
  @argumentDefinitions(
    searchString: { type: "String", defaultValue: "" }
  ) {
    userSearch(text: $searchString, first: 10) {
      edges {
        node {
          id
          name
          email
          picture
        }
      }
    }
  }
`, graphql `
  query UserPickerRefetchQuery($companyId: ID, $searchString: String) {
    company(id: $companyId) {
      ...UserPicker_company @arguments(searchString: $searchString)
    }
  }
`);

in the onChange method for input tag I have the following code:

onInputChange = (e) => {
  const value = e.target.value;
  this.props.relay.refetch({ searchString: value });
}

Relay does network query when I type new character and also when I delete a character. Ideally when characters are deleted it should use the same data that it queried previously.


Solution

  • Relay Modern does not implement a client side cache configuration by default for network request. The idea is to give users more control by allowing them to choose which queries to cache and which not.

    Some implementation proposition using RelayQueryResponseCache can be found here: https://github.com/facebook/relay/issues/1687#issuecomment-302931855