import ApolloClient from 'apollo-boost';

export const client = new ApolloClient({
  uri: 'http://seoul-smart-api.herokuapp.com',
});

...
import { ApolloProvider } from '@apollo/react-hooks';
import client from './apolloClient.js';

export default function App(props) {
    ...
    return (
        <ApolloProvider client={client} >
            <View />
        </ApolloProvider>
    );
}

import gql from 'graphql-tag';

const GET_PLACES = gql`
query getPlaces($page:Int) {
  getPlaces(page: $page) {
    id
    name
  }
}
`;

export {
    GET_PLACES
};

import gql from 'graphql-tag';

...
const SIGN_UP = gql`
mutation createUser($token: String!, $name: String!) {
    createUser(token: $token, name: $name) {
        id
        name
        achievement
        activityLog
    }
}
`
export {
    GET_PLACES,
    SIGN_UP
}

...
import { useQuery } from '@apollo/react-hooks';
import PlaceItem from './PlaceItem';
import { GET_PLACES } from './../query';

export default function PlaceList(){
    const { loading, error, data } = useQuery(
        GET_PLACES,
        { variables: { page: 1 } }
    );
    
    if(loading) return <View>Loading...</View>;
    if(error) return <View>Error...</View>;
    
    const placeList = data.getPlaces.map(({id, name}) => <PlaceItem key={id} name={name} />)
    return (
        <View>
            {placeList}
        </View>
    );
}

...
import { useState } from 'react';
import { useMutation } from '@apollo/react-hooks';
import { SIGN_UP } from './../query';

export default function SignUp(){
    const [signUp, { loading, error, data }] = useMutation(SIGN_UP);
    const [token, setToken] = useState();
    const [name, setName] = useState();
    
    return (
        <View>
            <TextInput value={token} onChangeText={(text) => setToken(text)}></TextInput>
            <TextInput value={name} onChangeText={(text) => setName(text)}></TextInput>
            <TouchableOpacity onClick={() => singUp({ variables: { token, name } })} >
                <Text>버튼</Text>
            </TouchableOpacity>
        </View>
    );
}

import { EDIT_FRAGMENT } from "./fragments";

const defaults = {
    edits: [{
        __typename: 'Edit',
        editing: false,
        id: 'new',
        name: '활동이름',
        total: 3,
        date: '2019-09-22',
        startTime: '02:00',
        endTime: '03:00',
        placeId: '장소id',
        room: '지대',
        content: '내용',
        type: 'mentoring'
    }]
};
const typeDefs = [`
      schema {
          query: Query,
          mutation: Mutation,
      }
      type Query {
          edits: [Edit]!
          edits(id: String!): Edit!
      }
      type Mutation {
          modifyEdit(id: String!): Edit!
      }
      type Edit {
          editing: Boolean!
          id: String
          name: String
          total: Int
          date: String
          startTime: String
          endTime: String
          placeId: String
          room: String
          content: String
          type: String
      }
`];
const resolvers = {
  Query: {
    edits: (_, variables, { cache }) => {
      const id = cache.config.dataIdFromObject({ __typename: "Edit" });
      return cache.readFragment({ frament: EDIT_FRAGMENT, id });
    }
  },
  Mutation: {
      modifyEdit: (_), variables, { cache }) => {
          const editQuery = cache.readQuery({query: GET_EDITS});
          const {name, total, date} = variables;
          const modifiedEdit = {
              __typename: 'Edit',
              name, total, date,
              ...
          }
          cache.writeData({
              data: {
                  edits: [modifedEdit, ...edits]
              }
          });
          return modifedEdit;
      }
      
  }
};

export default {
  defaults,
  typeDefs,
  resolvers
};

import gql from "graphql-tag";

export default EDIT_FRAGMENT = gql`
  fragment EditPars on Edit {
      editing
      id
      name
      total
      date
      startTime
      endTime
      placeId
      room
      content
      type
  }
`;

import gql from "graphql-tag";

export const GET_EDIT = gql`
  {
    edit @client {
      editing
      title
      content
    }
  }
`;