🔥Webサービス開発ログ Part 5 (GraphQL Mutation)

はじめに

このエントリは、Webアプリの開発進捗を記録しているシリーズです。

ソースコードはこちらです。

開発中のアプリをFirebaseにデプロイしていますので、よかったらこちらを見てみてください😆

ブログの一覧メニューを追加

こんな感じです

img

ブログ追加フォーム作成

ユーザが自分の好きなブログを新規登録するためのフォームが必要です。

スタイリングが面倒なので、react-native-ui-kittenを利用しました

img

ブログ登録処理

react-apolloのMutationコンポーネントを利用してFirebaseのRealtime Databaseにデータを登録します。

ブログ登録画面のソースコードはこんな感じになりました。

import React, { Component } from 'react';
import { View, Text } from 'react-native-web';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import { RkCard, RkTextInput, RkButton } from 'react-native-ui-kitten';

const ADD_BLOG = gql`
  fragment BlogInput on firebase {
    id: String
    name: String
  }
  mutation($ref: string, $input: BlogInput!) {
    pushdata(input: $input) @rtdbPush(ref: $ref) {
      id
      name
    }
  }
`;

class Blog extends Component {
  state = {
    name: '',
    url: '',
    successMessage: '',
    errorMessage: '',
  };

render() {
    const { name, url } = this.state;
    return (
      <Mutation
        mutation={ADD_BLOG}
        onCompleted={data => {
          this.setState({
            successMessage: <code>Success !: ${data.pushdata.name}</code>,
            name: '',
            url: '',
          });
        }}
        onError={() => {
          this.setState({ errorMessage: 'Error !' });
        }}
      >
        {(addBlog, { data }) => (
          <View style={{ backgroundColor: 'gray', flex: 1 }}>
            <RkCard style={{ margin: 10 }}>
              <View rkCardHeader>
                <Text>New Blog</Text>
              </View>
              <View rkCardContent>
                <RkTextInput
                  placeholder="Blog Name"
                  onChangeText={name => this.setState({ name })}
                  value={name}
                />
                <RkTextInput
                  placeholder="Feed Url"
                  onChangeText={url => this.setState({ url })}
                  value={url}
                />
                <RkButton
                  style={{ alignSelf: 'center' }}
                  onPress={() => {
                    this.setState({
                      successMessage: '',
                      errorMessage: '',
                    });
                    addBlog({
                      variables: {
                        ref: '/sites',
                        input: {
                          url,
                          name,
                        },
                      },
                    });
                  }}
                >
                  Add it !
                </RkButton>
                <Text style={styles.successMessage}>
                  {this.state.successMessage}
                </Text>
              </View>
            </RkCard>
          </View>
        )}
      </Mutation>
    );
  }
}

const styles = {
  successMessage: {
    color: 'green',
  },
  errorMessage: {
    color: 'red',
  },
};

export default Blog;

動作確認

うまく動くかな?

img

できました!

次回はFirebase Authenticationを利用してツイッターログインを実装しようと思います😆

Please follow and like us:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です