relay refetch doesn't show the result

Question

I'm trying to create a live search-result component(lazy load one). It works perfectly for the first time but refetch doesn't update the data. I see the request and respoonse in Network tab! so it does get the data, but it doesn't supply it to the component!

any idea why?

import React, { Component } from 'react';
import {
    createRefetchContainer,
    graphql,
} from 'react-relay';

import ProfileShow from './ProfileShow';

class ProfileList extends Component {
    render() {
        console.log("rendering....", this.props)
        return (
            <div className="row">
                <input type="text" onClick={this._loadMe.bind(this)} />
                {this.props.persons.map((person) => {
                    return (
                        <div className="col-md-3">
                            <ProfileShow person={person} />
                        </div>
                    );
                })}

            </div>
        );
    }
    _loadMe(e) {
        const refetchVariables = fragmentVariables => ({
            queryStr: e.target.value,
        });

        this.props.relay.refetch(refetchVariables, null, (...data) => {
            console.log(data)
        });
    }
}

const FragmentContainer = createRefetchContainer(
    ProfileList,
    {
        persons: graphql.experimental`
        fragment ProfileList_persons on Person @relay(plural: true) {
            fullname
            number
            email
            pic
        }
    `
    },
    graphql.experimental`
    query ProfileListRefetchQuery($queryStr: String!) {
        talentList(query: $queryStr) {
        ...ProfileList_persons
        }
    }
  `,
);

export default FragmentContainer;