Mutations with Relay (React)

[chrissm79]

I'm using the laravel-graphql, and created an issue but I'm not sure if it's something that should actually be created here (still trying to wrap my head around GraphQL).

When working with Relay, it expects that mutations have only one argument called input. Looking at the todo example, in the schema.json file it has that field listed as an INPUT_OBJECT type. I created the following (again, using laravel-graphql), but I'm unable to get the fields from the InputObjectType. Am I doing something wrong?

namespace App\GraphQL\Mutations;

use GraphQL;
use App\Models\Customer;
use GraphQL\Type\Definition\Type;
use GraphQL\Type\Definition\InputObjectType;
use Folklore\GraphQL\Support\Mutation;

class UpdateCustomerEmail extends Mutation
{
    /**
     * Associated GraphQL Type.
     *
     * @return mixed
     */
    public function type()
    {
        return GraphQL::type('customerPayload');
    }

    /**
     * Available arguments for mutation.
     *
     * @return array
     */
    public function args()
    {
        return [
            'input' => [
                'name' => 'input',
                'type' => new InputObjectType([
                    'name' => 'updateCustomerEmailInput',
                    'fields' => [
                        'entity_id' => [
                            'name' => 'entity_id',
                            'type' => Type::nonNull(Type::string())
                        ],
                        'email' => [
                            'name' => 'email',
                            'type' => Type::nonNull(Type::string())
                        ]
                    ]
                ])
            ]
        ];
    }

    /**
     * Resolve mutation.
     *
     * @param  string $root
     * @param  array $args
     * @return Customer
     */
    public function resolve($root, $args, $info)
    {
        // $root is null, $args is an empty array and nothing in $info gives me the 
        // variables passed in the request
        $customer = Customer::find($args['input']['entity_id']); // $args['input'] is not set
        $customer->email = $args['input']['email'];
        return $customer;
    }
}

[smolinari]

Did you also add the mutation to the configuration file, as explained here? (which seems to me to be a bit of a strange thing to have to do)

Scott

[chrissm79]

I did add it to the config file (this is a fairly common setup in Laravel). Overall everything has been really easy to work with except for mutations. Just trying to determine if this is an issue with the laravel package or if I'm not setting up my mutation properly.

I did see that the controller is passing through 'params' from the request instead of 'variables'. After switching that out, I'm hitting a different error message which leads me to believe that I need to make a change in my mutation, just not sure what:

"Variable $input_0 expected value of type updateCustomerEmailInput but got: {"entity_id":"2","email":"john.doe@example.com","clientMutationId":"4"}."

[smolinari]

Sorry, I missed the "Or" just below the config note saying you can use the config OR use the facade.

I am also not deep enough into graphql-php code to help further. Hopefully Vladamir (@vladar) can help.

Scott

[vladar]

Hey, I am not familiar with laravel-graphql, but in pure graphql-php, mutations do work with Relay for me with following helper (basically ported from https://github.com/graphql/graphql-relay-js):

<?php
namespace MyGraphQL;

// See https://github.com/graphql/graphql-relay-js/blob/master/src/mutation/mutation.js
use GraphQL\Type\Definition\InputObjectType;
use GraphQL\Type\Definition\ObjectType;
use GraphQL\Type\Definition\ResolveInfo;
use GraphQL\Type\Definition\Type;
use GraphQL\Utils;

class Mutation
{
    public static function mutationWithClientMutationId(array $config)
    {
        Utils::invariant(
            isset($config['inputFields'], $config['outputFields'], $config['mutateAndGetPayload']),
            "Invalid mutation config: make sure that options 'inputFields', 'outputFields' and 'mutateAndGetPayload' are set"
        );

        $outputType = new ObjectType([
            'name' => $config['name'] . 'Payload',
            'fields' => $config['outputFields'] + [
                'clientMutationId' => [
                    'type' => Type::nonNull(Type::string())
                ]
            ]
        ]);

        $inputType = new InputObjectType([
            'name' => $config['name'] . 'Input',
            'fields' => $config['inputFields'] + [
                'clientMutationId' => [
                    'type' => Type::nonNull(Type::string())
                ]
            ]
        ]);

        return [
            'type' => $outputType,
            'args' => [
                'input' => ['type' => Type::nonNull($inputType)]
            ],
            'resolve' => function($_, $args, ResolveInfo $info) use ($config) {
                $payload = call_user_func($config['mutateAndGetPayload'], $args['input'], $info);
                Utils::invariant(is_array($payload), 'Function "mutateAndGetPayload" is expected to return array');

                return $payload + [
                    'clientMutationId' => $args['input']['clientMutationId']
                ];
            }
        ];
    }
} 

Then your mutation type can be defined as:

namespace MyGraphQL;

use GraphQL\Type\Definition\ResolveInfo;
use GraphQL\Utils;

$toggleLikeMutation = Mutation::mutationWithClientMutationId([
    'name' => 'ToggleLike',
    'description' => 'Toggle like',
    'inputFields' => [
        'id' => [
            'type' => Type::id()
        ]
    ],
    'outputFields' => [
        'story' => [
            'type' => $myTypes->get('Story'),
            'resolve' => function($payload) {
                // fetch and return liked story by id
            }
        ]
    ],
    'mutateAndGetPayload' => function(array $input, ResolveInfo $info) {
        // ... perform mutation ...
        return [
            'id' => $input['id']
        ];
    }
]);

And then don't forget to add it to your Schema:

$schema = new Schema($queryType, new ObjectType([
    'name' => 'Mutation',
    'fields' => [
        'toggleLike' => $toggleLikeMutation
    ]
]))

Then check your schema.js for Relay. It should have types ToggleLikeInput and ToggleLikePayload. Relay expects them to exist to perform mutation correctly.

[chrissm79]

@vladar Thank you!! I'll give this a try, but thank you for providing this, it ought to be a big help for anyone trying to leverage GraphQL/PHP and Relay. There are a few other helpers I found in the graphql-relay-js package that I'll try to migrate over, but this is a great start.

[smolinari]

Yes, thanks for the great response @vladar. 👍 It actually helps me too, with another concern I have.

Scott

[vladar]

Glad to hear! Feel free to reopen this if you have other problems with mutations.

[chrissm79]

@vladar Did you have to create some sort of interface for your types? I'm having an issue when attempting to run an update mutation. It successfully sends the request to the server and gets a successful response with the updated data, but the component never reflects any of the changes. Asking around, someone mentioned that it may be an issue with Object Identification. Just curious if you've found a solution for this as well. Thanks again @vladar !

[vladar]

@chrissm79 Yeah, you need Node interface and each of your entity types must implement this interface.

Basically this interface only has one field id of type ID (Type::id()). Then when you map response in Mutation.getConfigs(), Relay expects you to use id field (not entity_id as you do now).

So your getConfigs() would look like:

{
  type: 'FIELDS_CHANGE',
  fieldIDs: {
    customer: this.props.customer.id, // <-- note, this must be field `id` of type `ID`, not `String`
  }
}

Also note, that Relay requires your Query type to contain top-level field node of type Node with id argument.

Another requirement is that you must be able to fetch your entity using this id. For example in my case id is composed of entity_id and entity_type, so that it globally identifies your entities.

Make sure to check docs on https://facebook.github.io/relay/docs/graphql-object-identification.html

Also, this JS helper has some hints on how to define these types: https://github.com/graphql/graphql-relay-js/blob/master/src/node/node.js

[smolinari]

A bit of an off-topic question, and because I am too lazy to go looking for the code, but does graphq-php make up the opaque IDs automatically or does that need to be covered by the underlying model to offer such IDs to graphql-php?

Scott

[vladar]

No, graphql doesn't provide any opaque ids automatically. Your data is your data. Maybe laravel-graphql does something here, but I am not aware of that.

[smolinari]

Cool. That is actually good and the answer I was hoping for, because I have a different method to create opaque (hashed) ids, than base64 encoding, like the Facebook docs suggest.

Scott

[vladar]

Yes, you can use such tools. base64 is just one of the options. Relay doesn't care much on how you encode your ids.

But note, that you should be able to fetch any node given the id only.

So, in RDBMS terms, if you have 10 tables for entities with autoincrement ids, Relay id must somehow encode both - table + row id, otherwise you won't be able to determine which table to query against.

[smolinari]

Yes, yes. Of course. 😄

Or, you actually have a database, which has defined, system wide unique ids for all records and can query on the ids to find the records directly and anywhere in the (distributed) system. 😉

SELECT * FROM someId

That is cool stuff, isn't it? Oh, and actually, all graph databases can do that, but with differing commands for their supported query languages. 😄

Scott