Docs
Launch GraphOS Studio
You're viewing documentation for a previous version of this software. Switch to the latest stable version.

9. Write your first mutation


In this section, you will write your first to log in to the backend. A mutation is used to change data on your server. Here the login mutation will create a session based on your email address.

Note: The way you log in to this particular server might differ from the way you log in with your own server. Login is often handled by middleware, or a layer totally separate from , like

. Also note that a typical authentication flow should require a password but for this tutorial, anyone is allowed to book flights with a valid email address!

Prototype your mutation in GraphQL Playground

Open

and select the login in the docs tab on the right:

The definition of login in the schema

This takes a single , the email address of the person being logged in. Unlike many that return objects which need to have selected, the login returns only a single string.

Type the following in :

mutation Login($email: String) {
login(email: $email)
}

If you hit Play, you should get a null login:

Results of not passing email

This is expected, because you didn't specify your email. To do so, add it to the Query Variables in the lower-left pane of Playground:

{ "email": "me@example.com" }

Press the Play button, and you'll get an actual response:

Results of passing an actual email

Add the mutation to the project

Now that your is working, add it to your project. Create a file named Login.graphql next to schema.json and your other files and paste the contents of the :

app/src/main/graphql/com/example/rocketreserver/Login.graphql
mutation Login($email: String) {
login(email: $email)
}

Build your project to generate the LoginMutation class.

Connect the Submit button to your mutation

Open LoginFragment.kt and like you did for the other , override onViewCreated. Add a click listener and some checks to verify that the email is a valid email:

app/src/main/java/com/example/rocketreserver/LoginFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.submitProgressBar.visibility = View.GONE
binding.submit.setOnClickListener {
val email = binding.email.text.toString()
if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
binding.emailLayout.error = getString(R.string.invalid_email)
return@setOnClickListener
}

From the click listener, display the ProgressBar and execute the with the email the user just entered:

app/src/main/java/com/example/rocketreserver/LoginFragment.kt
binding.submitProgressBar.visibility = View.VISIBLE
binding.submit.visibility = View.GONE
lifecycleScope.launchWhenResumed {
val response = try {
apolloClient.mutate(LoginMutation(email = Input.fromNullable(email))).await()
} catch (e: Exception) {
null
}

Handle errors if needed:

app/src/main/java/com/example/rocketreserver/LoginFragment.kt
val login = response?.data?.login
if (login == null || response.hasErrors()) {
binding.submitProgressBar.visibility = View.GONE
binding.submit.visibility = View.VISIBLE
return@launchWhenResumed
}

Finally if everything is successful, store the login and go back to the previous screen:

app/src/main/java/com/example/rocketreserver/LoginFragment.kt
User.setToken(requireContext(), login)
findNavController().popBackStack()
}
}
}

User is a helper class that saves the token in

. This is the reason why this tutorial uses API level 23+. Apollo Android itself supports API levels 19+.

Test the login

Go the details , click Book and in the Login , enter your email and click Submit. You now have a token that allows you to authenticate your queries.

The login screen

In the next section, you will

.

Previous
8. Add a details view
Next
10. Authenticate your queries
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company