relay: [Modern] RelayModernGraphQLTag: Expected an request error

Hello I ran into interesting error

Error: RelayModernGraphQLTag: Expected an request, got `{"fragment":{"argumentDefinitions":[],"kind":"Fragment","metadata":null,"name":"AppBarQuery","selections":[{"kind":"LinkedField","alias":null,"args":null,"concreteType":"User","name":"viewer","plural":false,"selections":[{"kind":"FragmentSpread","name":"Bar_viewer","args":null}],"storageKey":null}],"type":"Query"},"id":null,"kind":"Batch","metadata":{},"name":"AppBarQuery","query":{"argumentDefinitions":[],"kind":"Root","name":"AppBarQuery","operation":"query","selections":[{"kind":"LinkedField","alias":null,"args":null,"concreteType":"User","name":"viewer","plural":false,"selections":[{"kind":"ScalarField","alias":null,"args":null,"name":"name","storageKey":null},{"kind":"ScalarField","alias":null,"args":null,"name":"id","storageKey":null}],"storageKey":null}]},"text":"query AppBarQuery {\n  viewer {\n    ...Bar_viewer\n    id\n  }\n}\n\nfragment Bar_viewer on User {\n  name\n}\n"}`.

The above error occurred in the <ReactRelayQueryRenderer> component:
    in ReactRelayQueryRenderer (created by AppBar)
    in AppBar (created by Route)
    in Route (created by withRouter(AppBar))
    in withRouter(AppBar)
    in div (created by Segment)
    in Segment
    in Unknown
    in Router (created by BrowserRouter)
    in BrowserRouter

The code of AppBar.js:

const AppBarQuery = graphql`
  query AppBarQuery {
    viewer {
      ...Bar_viewer
    }
  }
`;

class AppBar extends Component {
  render() {
    const {location: {pathname}} = this.props;
    const active = pathname === '/' ? pathname.slice(1) : '/';
    return (
      <QueryRenderer
        environment={modernEnvironment}
        query={AppBarQuery}
        variables={{}}
        render={({error, props}) => {
          if (error) {
            return <div>{error.message}</div>;
          } else if (props) {
            console.log()
            return <Bar {...props} active={active} />;
          }
          return <Segment style={{ minHeight: 40 }} loading />;
        }}
      />
    );
  }
}
    
 export default withRouter(AppBar);

And Bar.js:

class Bar extends Component {
  render() {
    const {viewer, active} = this.props;
    if (viewer && !viewer.name) this._refetch();
    return (
      <div>
        <Menu color='orange' stackable pointing secondary size='large'>
          <Menu.Item
            color='white'
            name='Rettid'
            active
            as={Link} to='/'
          >
            <h2>Rettid</h2>
          </Menu.Item>
        </Menu>
        {!viewer &&
          <Menu.Item
            name='login'
            active={'login' === active}
            as={Link} to='/login'
          />
        }
        {!viewer &&
          <Menu.Item
            name='register'
            active={'register' === active}
            as={Link} to='/'
          />
        }
        {viewer &&
          <Menu.Item 
            name='profile'
            active={'profile' === active}
            as={Link} to='/'
          >
            <span>{viewer.name}</span>
          </Menu.Item>
        }
        {viewer && !viewer.ownsubrettid &&
          <Menu.Item
            name='createSubrettid'
            active={'create-subrettid' === active}
            as={Link} to='/'
          >
            Create Subrettid
          </Menu.Item>
        }
        {viewer &&
          <Menu.Item 
            name='logout'
            active
            as='h3'
            position='right'
            onClick={this._refetch}
          />
        }
      </div>
    );
  }
};

export default createFragmentContainer(
  Bar, 
  {
    viewer: graphql`
      fragment Bar_viewer on User {
        name
      }
    `
  }
);

Can someone help?