@8base/react-sdk 中文文档教程

Question

@8base/react-sdk

目录 使用 DocToc

• Installation
• Getting Started
• Examples

Installation

npm install --save @8base/react-sdk

或

yarn add @8base/react-sdk

Getting Started

@8base/react 生成-sdk 提供了将 8base 与 React 结合使用的工具。

import React from 'react';
import { AppProvider, gql } from '@8base/react-sdk';
import { Auth, AUTH_STRATEGIES } from '@8base/auth';
import { Query } from 'react-apollo';

const URI = "8base API URI',

const AUTH0_CLIENT_ID = 'auth0 client ID';
const AUTH0_CLIENT_DOMAIN = 'auth0 client domain';
const REDIRECT_URI = document.location.href.replace(document.location.hash, '');

const authClient = Auth.createClient({
  strategy: AUTH_STRATEGIES.WEB_AUTH0,
  subscribable: true,
}, {
  clientId: AUTH0_CLIENT_ID,
  domain: AUTH0_CLIENT_DOMAIN,
  // Don't forget set custom domains in the authentication settings!
  redirectUri: REDIRECT_URI,
  logoutRedirectUri: REDIRECT_URI,
});

const SAMPLE_QUERY = gql`
  query UserQuery {
    user {
      id
      email
    }
  }
`;

function App() {
  return (
    <div className="App">
      <AppProvider
        uri={URI}
        authClient={authClient}
      >
        {({ loading }) => {
          if (loading) {
            return <p>Please wait...</p>;
          }
          return <Query query={ SAMPLE_QUERY }>...</Query>
        }}
      </AppProvider>
    </div>
  );
}

Examples

• Guest App
• With Api Token App
• With Authorization App
• With Protected Routes