Search code examples
reactjsgraphqlrelayjs

Relay JS only on client side

I have developed a graphql server with laravel (https://github.com/Folkloreatelier/laravel-graphql). Now I would like to create a React application by using Relay. When I create my first component, then I receive the error: Uncaught Error: Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as Relay.QL.

I still googled the error and I recognized that I need to install the Babel Relay Plugin. But to include this plugin I have to specify a schema. But I still have specified this schema on server side, why do I need this also in client side? Is there any example how to implement this when a server is still implemented (external server, e.g. no NodeJS server).

Thank you for your advice.

Solution

  • The schema for your data on the server-side is required by babel-relay-plugin to do transpilation of Relay.QL fragments in Javscripts that will be delivered to the client-side. However, note that on your GraphQL server, you define the schema in Laravel GraphQL PHP classes, which you need to convert it into JSON format that babel-relay-plugin expects.

    For example, I did a similar setup with Rails and graphql-ruby (https://github.com/nethsix/relay-on-rails).

    • Define the data schema on my server-side using graphql-ruby classes in app/graph directory
    • Convert the schema into a JSON file using a script lib/tasks/graphql.rake, which I then stash into app/assets/javascripts/relay/data/schema.json
    • Point to the schema.json in your babelRelayPlug.js file wherever it is (mine is in assets/javascripts/relay/utils/babelRelayPlugin.js)

    For Rails, we can easily dump the graphql-ruby schema to json by just calling #to_json method. You may have similar methods in PHP.

    I compared the difference between setting up Relay on a nodejs server, vs. a non-nodejs server using an illustration here if it helps (https://medium.com/@khor/relay-facebook-on-rails-8b4af2057152)