I prefer to use rebing/graphql-laravel just because it has some little extra over Folklore’s code. I’d like to skip the parts of installation, configuration etc. and go to code directly;

This is the example of a schema key in the config/graphql.php which has a query and mutation definitions;

'system/translationManager' => [

'query' => [

'projects' => \App\GraphQL\Queries\System\TranslationManager\ProjectsQuery::class,

],

'mutation' => [

'updateProject' => \App\GraphQL\Mutations\System\TranslationManager\Projects\UpdateProjectMutation::class

],

'middleware' => ['throttle']

],

As you see from the example, my Laravel API has multiple GraphQL endpoints. To query or mutate projects in this API, /system/translationManager suffix should be added to /graphql url when using the apollo methods.

Projects Query is simply serves the translation projects data and includes id, name, status and list of locales that collected from a pivot table.

In the Edit Project Vue component, there’s a list of locales that included in the project and user may add/remove locales. Here is a example of a project data with the list locales;

data () {

return {

id: 6,

name: 'My First Translation Project',

status: 'active',

locales: [

{

id: 2,

identifier: 'tr-TR',

description: 'Turkish (Turkey)'

}, {

id: 3,

identifier: 'en-GB',

description: 'English (United Kingdom)'

}

]

}

}

Assume the user has modified the data and it’s time to update the model. The first thing is to create a InputObject Type in Laravel. But to give a better explanation, I’ll give the Query and Type definitions first.

You may think that I already have my Type of locales that already been used when locales data served to client. Then why should we need another Type? But in reality, that Type of locales can only serve the data. Imagine it is a computed data of Vue.js components with custom getter/setter functions. Query Types in Laravel GraphQL are the getters and InputObject Types are the setters for Array data.

Here is the Locales Type (getter);

This is the Projects Type;

We use both types in Projects Query, just after defining them in config/graphql.php;

'types' => [

'locales_type' => \App\GraphQL\Types\System\Localization\LocalesType::class,



'projects_type' => \App\GraphQL\Types\System\TranslationManager\ProjectsType::class

],

Now we are ready to define InputObject Type of Locales (setter);

Trick is the $inputObject = true

And we should add this to config/graphql.php too;

'types' => [

'locales_type' => \App\GraphQL\Types\System\Localization\LocalesType::class, 'locales_input_object_type' => \App\GraphQL\Types\InputObjects\LocaleInputObjectType::class, 'projects_type' => \App\GraphQL\Types\System\TranslationManager\ProjectsType::class

],

We now use everything in the UpdateProject Mutation;

Don’t forget to add mutation into config/graphql.php

The final step is to send mutation from our application;