How to use react-apollo-hooks - 10 common examples

const [account, setAccount] = useState(defaultState);
  const [submitting, setSubmitting] = useState(false);

  // GraphQL
  const createAccount = useMutation(CREATE_ACCOUNT_MUTATION, {
    refetchQueries: [
      { query: ALL_ACCOUNTS_QUERY },
      {
        query: ALL_ACCOUNTS_BY_DOMAIN_QUERY,
        variables: { domain }
      },
      { query: COUNT_QUERY },
      { query: ALL_DOMAINS_QUERY }
    ]
  });
  const { data, loading, error } = useQuery(ALL_DOMAINS_QUERY, {
    suspend: false
  });

  if (error) {
    console.log(error);
    return `Error!`;
  }

  const domains = data.domains
    ? data.domains.nodes
    : [{ id: -1, domain: "Loading ..." }];

  useEffect(
    () => {
      setAccount({ ...account, domain: domain || domains[0].domain });
    },

users = chat.allTimeMembers
    participants = users.slice()

    // Read-only if not owned by me
    if (ownedByMe) {
      chatNameState = useState(chat.name)
      chatPictureState = useState(chat.picture)
    } else {
      chatNameState = [chat.name, () => {}]
      chatPictureState = [chat.picture, () => {}]
    }

    const [chatName] = chatNameState
    const [chatPicture] = chatPictureState

    updateChat = useMutation<
      GroupDetailsScreenMutation.Mutation,
      GroupDetailsScreenMutation.Variables
    >(mutation, {
      variables: {
        chatId,
        name: chatName,
        picture: chatPicture,
      },
      optimisticResponse: {
        __typename: 'Mutation',
        updateChat: {
          ...chat,
          __typename: 'Chat',
          picture: chatPicture,
          name: chatName,
        },

return user.user
    });

    // Read-only if not owned by me
    if (ownedByMe) {
      chatNameState = useState(chat[0].name)
      chatPictureState = useState(chat[0].picture)
    } else {
      chatNameState = [chat[0].name, () => {}]
      chatPictureState = [chat[0].picture, () => {}]
    }

    const [chatName] = chatNameState
    const [chatPicture] = chatPictureState

    updateChat = useMutation(updateMutation, {
      variables: {
        chatId,
        name: chatName,
        picture: chatPicture,
      },
      update: (client, { data: { update_chat } }) => {
        chat[0].picture = update_chat.returning[0].picture
        chat[0].name = update_chat.returning[0].name

        client.writeFragment({
          id: defaultDataIdFromObject(chat),
          fragment: fragments.chat,
          fragmentName: 'chat',
          data: chat,
        })
      },

const Auth = props => {
  const [status, setStatus] = useState(null)
  const [loading, setLoading] = useState(false)
  const login = useMutation(LOGIN)
  const { enqueueSnackbar } = useSnackbar()
  const client = useApolloClient()

  const handleLogin = async () => {
    setLoading(true)
    try {
      const urlParams = new URLSearchParams(window.location.search)
      const code = urlParams.get('code')
      const state = urlParams.get('state')
      const { data, errors } = await login({ variables: { code, state } })
      if (errors) {
        console.error('[Error logging in]', errors)
        enqueueSnackbar('Error logging in', { variant: 'error' })
        setStatus(false)
      }
      if (data && data.login && data.login.token) {
        const jwt = data.login.token
        enqueueSnackbar(`Welcome to Together`)

const SettingsMenu = ({ classes }) => {
  const client = useApolloClient()
  const [anchorEl, setAnchorEl] = useState(null)
  const [localState, setLocalState] = useLocalState()
  const { user } = useUser()
  const channel = useCurrentChannel()

  const logout = e => {
    window.localStorage.removeItem('token')
    client.resetStore()
    window.location.href = '/'
  }

  return (
    
      
        {user && user.photo ? (

export const Menu: React.FunctionComponent = props => {
  const classes = useStyles();

  const themeContext = React.useContext(ThemeContext);

  const client = useApolloClient();

  const {
    anchorEl,
    onClose,
    history: { push },
    match
  } = props;

  return (
     onClose()}

const LoginPage: React.FunctionComponent = props => {
  const classes = useStyles();

  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [errorText, setErrorText] = React.useState('');
  const [loading, loadingAction] = useToggle(false);

  const login = LoginMutation.useMutation();
  const client = useApolloClient();

  const onSubmit = React.useCallback(async () => {
    setErrorText('');
    loadingAction.toggleOn();
    if (!username && !password) return;
    try {
      const variables: LoginMutation.Variables = { password };

      if (username && username.includes('@')) {
        variables.email = username;
      } else {
        variables.username = username;
      }

      const response = await login({ variables });
      loadingAction.toggleOff();

function EditCmsLayout({ match, history }) {
  const { data, error } = useQuerySuspended(CmsLayoutsAdminQuery);
  const initialLayout = error
    ? null
    : data.cmsLayouts.find((p) => match.params.id === p.id.toString());
  const [layout, dispatch] = useReducer(layoutReducer, initialLayout);
  const [updateMutate] = useMutation(UpdateLayout);
  const [updateLayout, updateError, updateInProgress] = useAsyncFunction(updateMutate);
  const apolloClient = useApolloClient();

  usePageTitle(useValueUnless(() => `Editing “${initialLayout.name}”`, error));

  if (error) {
    return ;
  }

  const formSubmitted = async (event) => {
    event.preventDefault();
    await updateLayout({
      variables: {
        id: initialLayout.id,
        cmsLayout: buildLayoutInput(layout),
      },
    });
    await apolloClient.resetStore();

export function use(
    baseOptions?: ReactApolloHooks.MutationHookOptions,
  ) {
    return ReactApolloHooks.useMutation(
      Document,
      baseOptions,
    )
  }
}

export default function useMutationCallback(mutation, baseOptions) {
  const [mutate] = useMutation(mutation, baseOptions);
  return mutate;
}