4

I'm building an app as my first real foray into React, Relay and GraphQL, using Relay Modern.

The basic case is, I have a login form component that doesn't really need any data; that is to say, the component renders a form, and has a corresponding mutation, but doesn't need to query anything.

It seems that providing a Relay style query fragment is a necessity when calling createFragmentContainer, which in turn ensures that the this.props.relay will not be null in the context of the component.

Right now, I'm using a standard (non-Relay) React component for the login form, but as a result I'm unable to access the Relay environment to pass it through to the mutation.

My question - is there a way to essentially pass an "empty" Relay fragment? Or is there some better idiom that is recommended in this case?

metahamza
  • 1,405
  • 10
  • 26

1 Answers1

4

You actually just use a normal component then create a mutation file with the mutation in it. Run the relay compiler to create the graphql fragment for the mutation and then call on the mutation in the form submit. The mutation does need your environment. Here is the relay modern docs:

https://facebook.github.io/relay/docs/mutations.html

You will need to store the result of the mutation somewhere and then append the auth token to your next requests, but that shouldn't be terribly hard to do. Just onCompleted and store the result somewhere.

Your environment should be a seperate file that you import for mutations and query renders. Only paginationContainer inherits encironment from a queryRenderer.

liminal18
  • 563
  • 7
  • 21
  • Most of that I have in hand already. My mutation is in its own file and works fine. Really the only issue is how to obtain the `environment` in the context of a non-Relay component, which it sounds like you gave me a clue to. I'll explore that – metahamza Aug 22 '17 at 15:41
  • Yeah environment you setup manually then you use it in queryrender or mutations. In this case just import your existing environment and use it again. This is how I did it: https://github.com/aljones15/RelayMapToDo/blob/master/src/ToDoList/CreateToDoMutation.jsx – liminal18 Aug 22 '17 at 15:43
  • I'm not sure this is right. The [relay docs](https://facebook.github.io/relay/docs/en/mutations.html#arguments) for mutations say "To ensure the mutation is performed on the correct environment, it's recommended to use the environment available within components (from this.props.relay.environment), instead of referencing a global environment." Seems they don't want you to import a global environment like this. – Rob Allsopp Jan 18 '18 at 21:33