Relay: [Modern] RelayModernGraphQLTag: Expected an request error

[F1NYA]

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



md5-76113bc0534c88c6151a5aa2a14e9626



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);



md5-c358533f176c8ccbb626f2ba061d95ef



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?

[sibelius]

https://github.com/facebook/relay/blob/aca48cd634cc1defa489d9361ee2acd057eda882/packages/relay-runtime/query/RelayModernGraphQLTag.js#L76

maybe this is a bug in your fetch

can u share your that?

check my implementation https://github.com/entria/ReactNavigationRelayModern/blob/master/src/createRelayEnvironment.js#L13

[F1NYA]

I have checked your implementation, and it did not help(
Maybe problem caused by babel fetch polyfill
I created repo here https://github.com/F1NYA/rettid-client

[F1NYA]

Disabled polyfills did not solve the problem
I tried replace standard fetch with axios, but it did not help too(

[F1NYA]

I have checked 1.3.0 version and it's working fine

[alloy]

Could it be that you had different versions of the various Relay packages?

Otherwise, can you please provide an example project that reproduces the problem?

[F1NYA]

https://github.com/F1NYA/rettid-client store version with this error

[dylanjshaffer]

Any luck resolving this? I've been getting the same error. I'm working on a repository with a few other team members and seem to be the only one affected. I've gone as far as nuking everything and starting from scratch with a fresh clone but the error persists with every component wrapped in a query renderer. All of my relay packages are 1.5.0

[adeperio]

Hi, yea I started getting this error today too. Did the same as @dylanahsmith. It was working previously on a tagged release, then I cleared out and did a fresh install and kept getting this error. The package.json caret caught me out and I think I upgraded to 1.5.0. Rolled back to 1.4.0 and this seems to have fixed my issue. Still sounds like a problem with v1.5.0?

[aquiseb]

I had this issue too after upgrading to 1.5.0. The thing that fixed it for me was simply to re-generate graphql files with relay-compiler (v1.5.0)

[cs-miller]

I'm getting a similar error, and like @adeperio I'm the only one on the team affected.
First I get an error saying node is not defined in a generated .graphql.js file

ReferenceError: node is not defined
    at Object.eval (webpack:///./.../__generated__/SomeQuery.graphql.js?:179:2)
    at eval (webpack:///./.../__generated__/SomeQuery.graphql.js?:197:30)
    at Object../.../__generated__/SomeQuery.graphql.js 
    at __webpack_require__ (/.../build/server.js:21:30)
    at query (webpack:///./.../SomeQuery.js?:40:16)
    at getNode (/...node_modules/relay-runtime/lib/RelayModernGraphQLTag.js:30:10)
    at getRequest (/.../node_modules/relay-runtime/lib/RelayModernGraphQLTag.js:40:17)
    at fetchQueryAndComputeStateFromProps (/.../node_modules/react-relay/lib/ReactRelayQueryRenderer.js:218:19)
    at new ReactRelayQueryRenderer (/.../node_modules/react-relay/lib/ReactRelayQueryRenderer.js:74:8)
    at processChild (/.../node_modules/react-dom/cjs/react-dom-server.node.development.js:2418:14)

Then, I get

Invariant Violation: RelayModernGraphQLTag: Expected a request, got `{}`.
    at invariant (.../node_modules/fbjs/lib/invariant.js:42:15)
    at getRequest (.../node_modules/relay-runtime/lib/RelayModernGraphQLTag.js:41:251)
    at fetchQueryAndComputeStateFromProps (.../node_modules/react-relay/lib/ReactRelayQueryRenderer.js:218:19)
    at new ReactRelayQueryRenderer (.../node_modules/react-relay/lib/ReactRelayQueryRenderer.js:74:8)
    at processChild (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:2418:14)
    at resolve (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:2384:5)
    at ReactDOMServerRenderer.render (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:2706:22)
    at ReactDOMServerRenderer.read (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:2680:23)
    at ReactMarkupReadableStream._read (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:3111:38)
    at ReactMarkupReadableStream.Readable.read (_stream_readable.js:442:10)

I'm on relay 1.6.2

[anandkanatt]

Any Luck on this issue i am facing the same now on 1.7.0-rc.1

[anandkanatt]

Error Message : RelayModernGraphQLTag: Expected a request, got {"text":"\n query CheckVoteQuery($userId: ID!, $linkId: ID!) {\n viewer {\n allVotes(filter: {\n user: { id: $userId },\n link: { id: $linkId }\n }) {\n edges {\n node {\n id\n }\n }\n }\n }\n }"}.

[sibelius]

try to run yarn why <name of the package>

yarn why react-relay and check all relay deps are the same

[anandkanatt]

yarn why v1.12.3
[1/4] Why do we have the module "react-relay"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "react-relay"
info This module exists because it's specified in "dependencies".
Done in 3.15s.

[sibelius]

can you try to keep all deps using latest version of relay?

my relay modern course can help you out https://relay-modern-course.now.sh/packages/

try to check this 2 boilerplates as well

https://github.com/sibelius/relay-modern-typescript
https://github.com/sibelius/create-react-app-relay-modern

[sibelius]

is this solved?

[alloy]

@sibelius I feel like you can err on the side of keeping things tidy, in cases like these 👍