Support for Relay Modern

Users Dgraph Cloud
,
1

I am considering to implement dgraph using Slash GraphQL, however unsure if it supports Relay Modern. Is it possible to use this framework with Dgraph?

2 Likes
2

Hey @charklewis, welcome to the coziest forum on the planet.

You can use Slash GraphQL with Relay Modern. If you need help let me know

3

Oh wonderful! Is there any particular config etc that I need to supply? Or does it work out of the box?

4

It should work out of the box. You can use Relay to build your graphql query/mutation then send it to the Slash GraphQL endpoint (assuming you already have the schemas in place in Slash)

5

Awesome. Now that I know it can work, I’ll sign up for a trial and have a play around. Thanks for the swift response!

6

Is there a recommended framework (Relay, Apollo etc) that is suggested for front end apps by Dgraph?

7

We don’t have recommended frameworks per se - you can use anything you like! However we have resources dedicated to react and apollo. Just search for “Apollo” or “React” in our blog or our docs.

We also have started a new dedicated learning centre for this:

https://dgraph.io/learn/courses/messageboardapp/react/overview/introduction/

8

I personally recommend using a stack containing React w/TypeScript, Apollo Client, graphql-codegen, and integrating with Auth0. I have put together a repo you might be interested in that is still under review that hopefully will be published to npm as a CRA template.

For clarification though on the README from the link above, you cannot currently call the template with

npx create-react-app your-path-to-new-app --template slash-graphql --use-npm

because it has not been published yet to npm.

You can clone this project to your local machine and start a project using it as a template by specifying the full path like

npx create-react-app test --template file:../path/to/cloned/repo --use-npm

There is even a script in this repo that walks you through deploying a Slash backend and configuring Auth0

npm run quickstart

It works as a walk through from the command line with prompts to Copy/Paste data in from Auth0.

1 Like
9

I am trying to use the features from Dgraph using Relay but coming across some issues.

For example I have this query:

queryMovie {
  title@fr
  description
}

Where title and description are string @lang. However when I try to compile this using Relay it errors with Unknown directive 'fr'.

Does this mean I can only use the Dgraph with a basic GraphQL schema when using Relay? I am assuming I am going to come across this issue with doing mutations also.

10

Ref:

11

Ah ok I see, it won’t work because this isn’t supported in GraphQL or Relay. That is a shame!

12

I am reading through the GraphQL Server Specification for Relay and noticed that Dgraph doesn’t produce this for you. When I have used a service in the past (eg Hasura) they produce a relay compliant endpoint for you to use. You still update your schema etc as normal, but all of the relay server spec is handled by the service (eg creating the Node type, edges, connections etc).

I’m assuming this isn’t the case when using Slash?

13

I have not used Relay before, but I will look it up.

I will circle back on this after looking up relay, but Slash GraphQL does generate a full spec compliant GraphQL API endpoint.

Hasura can be loosely compared because it generated an API off from a database schema where Slash GraphQL generates the API & graph database from asimplified GraphQL schema of types.

Update: Relay, from my limited understanding is a client side Javascript framework for React applications. It has requirements for a GraphQL API such as pagination, normalized mutation, and globally unique identifiers. Dgraph’s GraphQL API endpoint does all of these things. I am still unsure if you have to create a Node interface that is implemented by all types or if that is just recommended. Either way though, Dgraph’s Slash GraphQL can be used with Relay’s framework.

In my opinion though, Relay looks very complicated and doesn’t add much value in a tech stack that can’t be achieved easier with Apollo Client and graphql-codegen

1 Like
14

Thanks for looking into this. I’m assuming then the Slash GraphQL product doesn’t support Relay natively and in order to comply with their server schema, this must be implemented by yourself. This is a shame as other back end services implement this for you based on your schema / database.

While Relay does look complicated at the beginning, I have found (as a Front End dev) it is a much better framework due to the reasons stated on their home page. GraphQL even links back to Relay for best practices (eg here).

15

Well this is a bit more complicated than what you stated simply there… overall to “support Relay natively” Dgraph’ GraphQL endpoint would have to add restrictions. Dgraph does not add these restrictions as not all developers want these. If you add a Node interface with the id and then create your other types implementing this interface then it should support Relay 100% natively.

Dgraph does generate the native GraphQL API it is just up to the developer to do it in a Relay style. Pagination, get queries, list queries, mutations, and subscriptions are all implemented to support Relay’s needs 100%

Hope this clarifies. I will try to find someone who has used Relay with Dgraph for deeper insights.

16

Thanks for the swift reply! I am not too sure about just adding in the Node interface is enough… (I could be wrong). For example you query data based via connection queries and edge types.

What I mean by “natively” is that I provide a Type, the heavy lifting of adding the connections/edges/node types/mutations etc are handled for me. For example how Hasura solves this is via an opt in feature that builds a relay compliant version of your schema for you.

I am new to the back end world of GraphQL and only used services that handle this for me, hence the possible confusion on my part.

If you are able to find additional resources for having a Relay compliant schema with Dgraph that would be very helpful!

2 Likes
17

Yeah… I saw some of that in my short review, but think it may not be necessary. With Dgraph, everything is edge based natively so finding edges is simply traversing a graph. I would think that the examples and Hasura show one way that it can be supported but Relay docs lead me to believe there are other ways to support the same functionality.

*Still looking for someone who has done it before Relay w/Dgraph, but will probably be Monday before I get responses.

1 Like
18

Thanks again for the help! I’ll carry on without implementing any specific Relay specs for now.

1 Like
19

Justing checking in to see if there were any updates to this?

20

Hi @charklewis

I tried to create a basic example with Relay and here are my findings -

  • The raw queries(QueryRenderer), mutations(commitMutation) & subscriptions(requestSubscription) seem to be working as expected.
  • Relay specific things like createFragmentContainer and @connection don’t seem to work.
  • The Relay store things like getRootField, getLinkedRecord seem to work but can be tricky to manage.

Since Relay is not completely supported I would highly recommend using Apollo or if you’re looking for something lightweight try urql.
I followed this tutorial and the Relay docs to create the example.

1 Like