Agoston의 React, urql 및 GraphQL API를 사용한 전체 스택 예제 - 1부

하루 안에 온라인으로 실시간 풀스택 애플리케이션을 원하십니까? 이 게시물에서는 모든(주니어, 프런트엔드) 개발자가 Agoston.io를 사용하여 백엔드를 생성하고, 최소 구성을 설정하고, 인증, GraphQL 요청 및 구독 구현을 시작할 수 있는 단계를 설명합니다.

1. 백엔드 생성

Agoston.io에서 계정을 만드십시오. 기본 페이지에서 새(무료) 백엔드를 만듭니다.



몇 분 후 Postgres, Postgraphile 등을 사용하여 완전하고 안전한 백엔드를 갖게 됩니다.

2. 구글 인증 활성화

백엔드 이름을 클릭합니다. 백엔드 구성 페이지로 연결됩니다. 하단에는 인증 구성이 있습니다.

Google 인증을 활성화하고 Client ID 및 Client secret를 입력합니다(Google 지침here에 따라 얻을 수 있음).



콜백 URL: Google에서 콜백 URL을 요청합니다. 구성 페이지, 섹션 Authentication strategies , 필드 Callback URL 에서 찾을 수 있습니다.

3. 백엔드 다시 로드

Google 인증을 고려하는 데 필요한 단계:



재장전은 1분도 채 걸리지 않습니다.

4. 새로운 React 앱 시작

npx create-react-app agoston-example-react-urql
cd agoston-example-react-urql
npm install --save react-router-dom
npm install --save urql graphql graphql-ws
npm run start

5. Graphql 가져오기 및 GraphQL 클라이언트 생성

// file ./index.js

// Graphql and urql import
import { createClient, Provider, defaultExchanges, subscriptionExchange } from 'urql';
import { createClient as createWSClient } from 'graphql-ws';


// GraphQL client for websocket subscription
const wsClient = createWSClient({
  fetchOptions: () => ({
    credentials: 'include',
  }),
  url: GRAPHQL_WS_ENDPOINT, // Change the endpoint here with the one of your backend
});

// GraphQL client for standard Graphql requests
const client = createClient({
  fetchOptions: () => ({
    credentials: 'include',
  }),
  url: GRAPHQL_ENDPOINT, // Change the endpoint here with the one of your backend
  exchanges: [
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription: (operation) => ({
        subscribe: (sink) => ({
          unsubscribe: wsClient.subscribe(operation, sink),
        }),
      }),
    }),
  ],
});

//Make the GraphQL client available for the application
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider value={client}>
    <RouterProvider router={router} />
  </Provider>
);

완전한 파일on Github .

6. 세션 데이터를 가져오기 위해 graphQL 쿼리를 추가합니다.

// file ./routes/root.js

const AgostonSessionData = `query agostonSessionData {
    isSessionAuthenticated
    getCurrentRole
    getCurrentUserId
}`

7. 구성 요소에서 쿼리를 실행하고 렌더링합니다.

// Find the login link in the configuration page, section `Authentication strategies`, field `Auth. URL`.
var AGOSTON_AUTH_GOOGLE="https://<backend_uuid>.<cluster_uuid>.backend.agoston.io/auth/google-oauth20"

Find the login link in the configuration page, section `Authentication URLs`, field `Logout current session`.
var AGOSTON_AUTH_LOGOUT="https://<backend_uuid>.<cluster_uuid>.backend.agoston.io/auth/logout"

function RootWithSessionData() {

    // Execute the query
    const [resultQuery] = useQuery({
      query: AgostonSessionData
    });

    if (resultQuery.fetching) return <p>Loading...</p>;
    if (resultQuery.error) return (
          <div>
            <p>☠ App fails to load | ❌ {resultQuery.error.message}</p>
          </div>
          );

    var sessionData = resultQuery.data;

    return (
        <div >
            <p className={sessionData.isSessionAuthenticated?'banner d-none':'banner'}>🔥 Authenticate yourself <a href={AGOSTON_AUTH_GOOGLE}>here</a>.</p>
            <p className={sessionData.isSessionAuthenticated?'banner':'banner d-none'}>
                🔥 Authenticated as <span className="user-id">user {sessionData.getCurrentUserId}</span> Logout <a href={AGOSTON_AUTH_LOGOUT}>here</a>.
            </p>
        </div>
      );
  };


const Root = () => {
    return (
      <div>
        <RootWithSessionData />
      </div>
    );
}

완전한 파일on Github .

결론

이제 사용자 인증을 포함하여 애플리케이션의 기반이 마련되었습니다.

다음 단계는 데이터 모델을 생성하고 GrpahQL 요청(쿼리, 변형, 구독)을 구현하는 것입니다.

부인 성명

저는 검증된 오픈 소스 솔루션을 활용하는 서비스로서의 백엔드인 Agoston.io의 제작자입니다. Agoston에는 단일 GraphQL 끝점, 자체 호스팅, 통합 인증, 구독, 전용 Postgres, 사용자 지정 코드, Stripe 웹후크, 작업 예약 및 트리거가 포함됩니다.