graphQL 시작하기 (feat. Apollo Client)

SELECT name, height FROM heroes

{
  hero {
    name
    height
  }
}

GET /post/:post_id/comments

$ npm install @apollo/client graphql
또는
$ yarn add @apollo/client graphql

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://example.com/graphql', // 서버 주소
  cache: new InMemoryCache() 
});

import { ApolloProvider } from '@apollo/client';
import { render } from 'react-dom';

function Index() {
  return (
    <ApolloProvider client={client}>
			<App />
    </ApolloProvider>
  );
}

render(<Index />, document.getElementById('root'));

import { gql, useQuery } from '@apollo/client';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" >
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);
  const [dog, setDog] = useState('');
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error! {error}</p>;

  const onDogSelected = (e) => {
    setDog(e.target.value);
  };

  return (
    <>
      <select name='dog' onChange={onDogSelected}>
        {data.dogs.map((dog) => (
          <option key={dog.id} value={dog.breed}>
            {dog.breed}
          </option>
        ))}
      </select>
      {dog && <DogPhoto breed={dog} />}
    </>
  );
}

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}

import { gql, useMutation } from '@apollo/client';

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

function AddTodo() {
  let input;
  const [addTodo, { data }] = useMutation(ADD_TODO);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
}

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      type
    }
  }
`;

function Todos() {
  const { loading, error, data } = useQuery(GET_TODOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return data.todos.map(({ id, type }) => {
    return (
      <div key={id}>
        <p>{type}</p>
      </div>
    );
  });
}

  const [addTodo] = useMutation(ADD_TODO, {
    // 캐시를 직접 조작해서 새로 추가된 todo object를 추가해줌
    update(cache, { data: { addTodo } }) {
      cache.modify({
        fields: {
          todos(existingTodos = []) {
            const newTodoRef = cache.writeFragment({
              data: addTodo,
              fragment: gql`
                fragment NewTodo on Todo {
                  id
                  type
                }
              `,
            });
            return [...existingTodos, newTodoRef];
          },
        },
      });
    },
  });

import { WebSocketLink } from '@apollo/client/link/ws';

const link = new WebSocketLink({
  uri: 'ws://example.com/graphql',
  options: {
    reconnect: true,
  },
});

const client = new ApolloClient({
  link,
  uri: 'http://example.com/graphql',
  cache: new InMemoryCache(),
});

const GET_MESSAGES = gql`
  subscription {
    messages {
      id
      user
      content
    }
  }
`;

function Messages({ user }) {
  const { data } = useSubscription(GET_MESSAGES);

  if (!data) return null;
  return data.messages.map(({ id, user: messageUser, content }) => (
    <div
      key={id}>
      {user !== messageUser && (
        <div>
          {messageUser.slice(0, 2).toUpperCase()}
        </div>
      )}
      <div>
        {content}
      </div>
    </div>
  ));
}

const POST_MESSAGE = gql`
  mutation($user: String!, $content: String!) {
    postMessage(user: $user, content: $content)
  }
`;


function Chat() {
  const [state, setState] = useState({ user: 'Mengkki', content: '' });
  const [postMessage] = useMutation(POST_MESSAGE);

  const onSend = (e) => {
    e.preventDefault();
    if (state.content.length > 0) {
      postMessage({ variables: state });
    }
    setState({ ...state, content: '' });
  };

  return (
    <div>
      <Messages user={state.user} />
      <form className='inputWrapper' onSubmit={onSend}>
        <input
          className='userInput'
          type='text'
          value={state.user}
          onChange={(e) => setState({ ...state, user: e.target.value })}
        />
        <input
          className='contentInput'
          type='text'
          value={state.content}
          onChange={(e) => setState({ ...state, content: e.target.value })}
        />
        <button className='sendButton'>Send</button>
      </form>
    </div>
  );
}