Integrate apollo client in react-native app #2
Previously in #1, I’ve introduced how to integrate your graphql endpoint using apollo client. Now, I’ll explain how to use it and write integration testing.
We are building our opensource chat app called HackaTalk. Today, we’d like to integrate graphql
APIs into our chat app and I’ll show you how you can do it.
We want to start from SignUp
screen.
You can find out in our staging
server and see what queries are available. I like to integrate signUp
mutation queries on our SignUp
screen.
Let's do it!
1. Import useMutation
function.
import { useMutation } from '@apollo/react-hooks';
2. Make a mutation query
const [signUp] = useMutation<{ signUp: AuthPayload }, MutationSignUpInput>(MUTATION_SIGN_UP);
Since we are using typescript
in our project, we can use generic
for typing queries
while using useMutation
. In the first generic parameter, we pass types for the expected return values and input variable types for the second generic parameter.
3. When clicking on sign-up
button, we’ll use signUp
function provided by useMutation
.
const requestSignUp = async (): Promise<void> => {
setSigningUp(true);
const variables = {
user: {
email,
name,
password,
statusMessage,
},
}; try {
const { data } = await signUp({ variables });
AsyncStorage.setItem('token', data?.signUp.token || '');
setAuthUser(data?.signUp.user);
} catch (err) {
Alert.alert(getString('ERROR'), err.message);
} finally {
setSigningUp(false);
}
}
By setting proper setAuthUser
as above, it will navigate the MainStack
navigation which handles screens after the user has signed in. This is handled by the context provider that we’ve created and we are using it via useAuthUserContext
.
Note that above code is generally introduced auth-flow by react-navigation
v5 which we are eagerly using these days.
4. Let’s check if it actually worked by testing in playground
.
5. It’s time to write test code!
- Firstly, we need to install `@apollo/react-testing` to use
MockedProvider
.
import { MockedProvider } from '@apollo/react-testing';
- Mock
signUp
mutation query.
const mockSignUpMutation = [
{
request: {
query: MUTATION_SIGN_UP,
variables: {
user: {
email: 'test@email.com',
name: 'name',
password: 'testpass12!',
statusMessage: 'status',
},
},
},
result: {
data: {
signUp: {
token: 'access token',
user: {
id: 'userId',
email: 'test@email.com',
nickname: 'nickname',
statusMessage: 'status',
},
},
},
},
},
];
Put this in MockedProvider
and wrap your component.
<MockedProvider mocks={mockSignUpMutation} addTypename={false}>
<SignUp {...props} />
</MockedProvider>,
Note here that we don’t need waait
when you are using native-testing-library
since await act(() => wait())
is enough. I am noting this because Apollo recommends to use it in their article.
After wait()
you can expect your result!
If you want to explicitly check what to expect, you can follow the tutorial.
Now you became a developer who can integrate graphql
APIs and also writing a test code which is mostly common procedure today.
You can see the full source code below.
Thank you for reading!