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.

You can see that only `email` and `password` are the necessary parameters in UserInput.

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.

It will call `requestSignUp` function when button has been pressed.

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.

See the ternary operator provided for differentiating `AuthStack` and `MainStack`. When there is a user, it will navigate to `MainStack` and it will navigate to `AuthStack` when the user has not signed in.

Note that above code is generally introduced auth-flow by react-navigation v5 which we are eagerly using these days.

Ok! we’ve successfully made it!

4. Let’s check if it actually worked by testing in playground.

We can see `hackatalk11@gmail.com` has been added to users.

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.

• SignUp screen
• SignUp screen testing

Thank you for reading!