iAPと通信を行う

このセクションではIMFetchを使ってiAPと通信を行う方法について学びます。
IMFetchを利用するには前セクションで説明した認可が完了している必要があります。

認可が完了したあとに利用する

IMFetchは認可が完了しており、useAuthStateがauthorizedを返している状態である必要があります。

import { Smartlime, useIMFetch, useAuthState } from "@intra-mart/smartlime";
import { DefaultAuthScreen } from "@intra-mart/smartlime-ui";
import { Text } from 'react-native';

const ChildComponent = () => {
  // state is authorized.
  const state = useAuthState();
  const imFetch = useIMFetch();

  return <Text>Hello World</Text>
}

const App = () => {
  return (
    <Smartlime
      baseUrl={'https://example.org/imart'}
      imoauth={{
        requestConfig: {
          clientId: 'exampleId',
          clientSecret: 'exampleSecret',
          scopes: ['account'],
          redirectUri: 'exp://example.org:19000',
        },
      }}
    >
      <DefaultAuthScreen>
        <ChildComponent />
      </DefaultAuthScreen>
    </Smartlime>;
  )
}

Rest APIを呼び出す

imFetchでiAPのRest APIを呼び出します。
imFetchはいくつかの点を除いて通常のFetchと同じように利用できます。

主なFetchと異なる点

• リクエストを送信する際にHeaderにアクセストークンを自動的に埋め込みます。
• inputにはSmartlime Providerに渡したbaseUrlを基点とした相対パスのみを受け付けます。
  • imFetchはiAPと通信を行うためだけに用意されています。
  • あなたがアプリ内でiAP以外と通信を行う場合は通常のFetchを使用しなければなりません。

この例では自分のアカウント情報を取得しています。
アクセストークンが自動的に埋め込まれるためimFetchにRest APIの相対パスを指定するだけでリクエストを送信する事ができます。

import { Smartlime, useIMFetch } from "@intra-mart/smartlime";
import { Button } from 'react-native';

const ChildComponent = () => {
  const imFetch = useIMFetch();

  const onPress = async () => {
    const response = await imFetch(`/api/me`);
    // json.data.userCd is your userCd
    const json = await response.json();
  };

  return <Button title={'refresh'} onPress={onPress} />;
}

TypeScript

TypeScriptを利用している場合Genericsでresponse.json()に型を付ける事が可能です。

import { Smartlime, useIMFetch } from "@intra-mart/smartlime";
import { Button } from 'react-native';

interface MeResponse {
  data: { userCd: string };
}

const ChildComponent = () => {
  const imFetch = useIMFetch();

  const onPress = async () => {
    const response = await imFetch<MeResponse>(`/api/me`);
    // json.data.userCd exists as a type.
    const json = await response.json();
  };

  return <Button title={'refresh'} onPress={onPress} />;
}