💡 본 게시글은 apollographql 공식문서의 내용을 참고했습니다.

개요

Apollo Client는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript용 상태 관리 라이브러리입니다. 그럼 GraphQL가 무엇일까요? 간단히 얘기하자면 GraphQL는 페이스북이 만든 쿼리 언어이며 Over Fetching과 Under Fetching의 문제를 해결할 수 있는 쿼리 언어입니다.

장점 간단 정리

• 로컬 및 원격 데이터 관리
• Over Fetching과 Under Fetching 방지
• 데이터, 로딩, 에러를 추적하고 UI를 업데이트하는 선언적 데이터 패칭
• 설정이 전혀 필요없는 캐싱

사용해보기

패키지 설치

@apollo/client와 graphql를 설치합니다.

yarn add @apollo/client graphql

ApolloClient 초기화

function App(): JSX.Element {

  // Init...
  const client = new ApolloClient({
	// 서버 주소
    uri: 'https://flyby-router-demo.herokuapp.com/',
    cache: new InMemoryCache(),
  });

  return (
	// Provider...
    <ApolloProvider client={client}>
      <SafeAreaView>
        <Home />
      </SafeAreaView>
    </ApolloProvider>
  );
}

useQuery

쿼리 구문에서 원하는 속성만 정의해 데이터를 가져옵니다.

function Home(): JSX.Element {
  // sql 쿼리 정의
  const GET_LOCATIONS = gql`
    query GetLocations {
      locations {
        id
        name
        description
        photo
      }
    }
  `;

  const {loading, error, data} = useQuery(GET_LOCATIONS);

  const Item = ({item}: ItemType) => (
    <View>
      <Text>{item.name}</Text>
      <Image style={{width: 200, height: 200}} source={{uri: item.photo}} />
      <Text>About this location:</Text>
      <Text>{item.description}</Text>
    </View>
  );

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error : {error.message}</Text>;

  return (
    <FlatList
      data={data.locations}
      renderItem={Item}
      keyExtractor={item => item.id}
    />
  );
}

export default Home;

useMutation

import {Button, Text, TextInput, View} from 'react-native';
import {useMutation, gql} from '@apollo/client';
import {useState} from 'react';


function Home(): JSX.Element {
  const [text, onChangeText] = useState('');

  const ADD_TODO = gql`
    mutation AddTodo($type: String!) {
      addTodo(type: $type) {
        id
        type
      }
    }
  `;

  const [addTodo, {data: todoData, loading: todoLoading, error: todoError}] =
    useMutation(ADD_TODO);

  if (todoLoading) return <Text>Loading...</Text>;
  if (todoError)
    return (
      <Text>
        Error : {todoError?.message}
      </Text>
    );

  return (
    <View>
      <TextInput
        onChangeText={onChangeText}
        value={text}
        placeholder="Add todo..."
      />
      <Button
        title="send"
        onPress={() => {
          addTodo({variables: {type: text}});
          onChangeText('');
        }}
      />
    </View>
  );
}

export default Home;