안녕, 세상!이 블로그에서, 나는 어떻게 서로 다른 장면에서 Apollo의 React 갈고리를 사용하여 GraphQL API에 연결하는지 토론할 것이다.만약 당신이 이 점을 기본적으로 알고 있다면, 나는 우리가 진행하고 있는 프로젝트 Litmus Portal 에서 이미 사용한 예시를 몇 개 제시함으로써 React 갈고리를 사용하여 UI와 GraphQL 데이터를 공유하는 방법을 설명할 것입니다.

GraphQL이란 무엇입니까?

계속하기 전에 GraphQL과 우리가 토론할 모든 것을 간략하게 요약해 보겠습니다.GraphQL은 Facebook에서 개발한 API 쿼리 언어입니다.다음과 같은 특징이 있기 때문에 REST의 효과적인 대체품입니다.

REST와 달리 GraphQL은 데이터를 과도하게 얻거나 얻지 못했습니다.

graphQL 모드 정의 언어(SDL)로 작성할 수 있는 강력한 형식의 graphQL 모드는 컴파일할 때 API 요청을 검증하는 데 도움을 줍니다.

각종 GraphQL 라이브러리(Apollo, Relay 등)가 개발됨에 따라 캐시, 실시간 데이터 등 많은 기능을 얻을 수 있습니다.

그것은 거대하고 놀라운 지역 사회를 제공했다!문제에 부딪힐 때마다 너는 항상 답을 얻을 수 있다.

이것은 GraphQL에 대한 기본적인 설명일 뿐이지만, 이 사이트를 방문하여 GraphQL에 대한 더 깊은 이해를 얻는 것을 권장합니다.

우리 뭐 할 거예요?

나는 주로 앞부분에 관심을 기울일 것이다. 여기서 나는 두 개의 매우 유용한react 갈고리useQuery와useMutation를 설명할 것이다. 우리는 프로젝트에서 그것들을 어떻게 사용하여 GraphQL 조작과 코드를 진행하는지 설명할 것이다.

기다리다GraphQL 작업이란 무엇입니까?

GraphQL은 조회, 변이, 구독 등 다양한 유형의 조작을 제공하는데 이런 조작은 클라이언트가 보내는 요청의 입구점을 충당한다.이 블로그에서 나는 앞의 두 가지 유형, 즉 조회와 변이를 토론할 것이다.

질의: useQuery 갈고리는 서버에서 데이터를 가져와 UI에 첨부하는 데 사용됩니다.쿼리를 실행하려면 쿼리 문자열을 전달하여 이 갈고리를 호출해야 합니다. 이 갈고리는 Apollo 클라이언트에서 data, error, loading 개의 속성을 포함하는 대상을 되돌려줍니다. 이 속성들은 실행 후 값을 변경합니다.구성 요소가 나타날 때 갈고리를 호출하고 상기 속성을 사용하여 UI를 표시할 수 있습니다.

기본 구문:

const { loading, error, data } = useQuery<Type1, Type2>(
    QUERY_STRING,
    { variables: <variable>,
onCompleted:()=>{console.log("query successful",data);}
,
onError:(error)=>{console.error(error);},
});

data: 조회에 성공하면 필요한 데이터를 얻을 수 있습니다.

loading: 이것은 부울 값입니다. 만약true 조회가 여전히 진행 중이라는 것을 나타냅니다.성공하면 loading 값이 false 로 변경됩니다.

error: 질의할 때 오류가 발생하면 이 오류를 저장합니다.

변이: useMutation 갈고리는 GraphQL 서버에 업데이트를 보내는 데 사용되기 때문에 백엔드에서 데이터를 업데이트할 수 있습니다.문법으로 말하자면, 그것은 useQuery과 약간 비슷하지만, 약간의 미세한 차이가 있다.변이를 실행하려면 변이 문자열을 갈고리에 전달해야 한다.이 갈고리는 mutate 함수를 포함하는 원조를 되돌려줍니다. 이 함수는 실행이 필요할 때 호출할 수 있고, 일부 필드가 있는 대상을 나타냅니다. 이 필드는 돌연변이 실행의 현재 상태를 나타냅니다.

기본 구문:

 const [mutateFunction,{ error,loading}] = useMutation<Type>(MUTATION_STRING, {
    onCompleted: () => {
    console.log("details updated")
    },
    onError: (error) => {
    onError:(error)=>console.error(error);
    },
    refetchQueries: [{ query: QUERY_STRING, variables: <variable>],
  });

mutateFunction: 언제든지 mutate 함수를 호출하여 변이를 실행할 수 있습니다.

두 번째 매개 변수는 돌연변이 실행 상태를 나타내는 대상이다. 예를 들어 error, loading 위에서 설명한 바와 같다.

이 두 예제에서 나는 연결에 옵션을 추가했다.

onCompleted: 조회/변이에 성공한 후 실행된 리셋입니다.

onError: 오류가 발생했을 때 리셋을 실행합니다.

refetchQueries: 변이가 성공한 후에 다시 추출해야 할 조회 목록을 지정하는 데 사용되는 수조나 함수가 필요합니다.

다음과 같은 몇 가지 유용한 방법:

필요한 곳에 요청 기간에 보내거나 받은 데이터를 입력하십시오.그것은 가독성과 이해성을 증강시켰다.

초보자로서 우리는 보통 본지의 요청에서 받은 데이터를 필요하지 않은 곳에 저장하는 경향이 있다.Apollo 클라이언트는 데이터를 저장하는 메모리 캐시를 제공하여 클라이언트가 불필요한 요청을 보내지 않고 미래에 같은 데이터에 대한 조회에 응답하도록 도와줍니다.따라서 로컬 주에 저장하지 않고 반복적으로 요청할 필요 없이 직접 액세스하고 사용할 수 있습니다.

현재, 나는 우리가 진행하고 있는 프로젝트'리트머스 포털'에서 사용하는 예들을 설명할 것이다.

Litmuschoos 회사

LitmusChaos는 클라우드 원생 시스템에서 혼돈 공정을 실시하는 데 사용되는 개원 도구집이다.그것은 hub 에서 대량의 혼돈 실험을 진행했다.더 자세한 내용을 알고 싶으시면 저희의 github 환매 협의를 보십시오.Litmus Portal은 혼돈된 워크플로우를 둘러싼 이벤트를 관리, 감시, 관리하기 위해 컨트롤러와 UI 체험을 제공합니다.개발 중입니다. 프런트엔드는 React 및 TypeScript, 백엔드는 Golang을 사용합니다.

예제

더 이상 미루지 말고 시작합시다!!

Since the examples I am going to explain are a part of a project, I have excluded some parts of the logic which are not relevant to the blog. You can find the complete code here.

조회

구조

export const GET_USER = gql`
  query getUser($username: String!) {
    getUser(username: $username) {
      username
      email
      id
      name
      projects {
        members {
          user_id
          user_name
          role
          invitation
          name
          email
          joined_at
        }
        name
        id
      }
      company_name
      updated_at
      created_at
      removed_at
      is_email_verified
      state
      role
    }
  }
`;

export const ALL_USERS = gql`
  query allUsers {
    users {
      id
      name
      username
      email
    }
  }
`;

GET_USER 검색 문자열은 변수로 전달된 사용자의 완전한 상세한 정보를 되돌려줍니다.username 쿼리 문자열은 ALL_USERS, id, name, username 및 email 등 모든 사용자의 목록과 상세한 정보를 되돌려줍니다.
질의 사용

const { data: dataB } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(
    GET_USER,
    { variables: { username: userData.username } }
  );

 const { data: dataA } = useQuery(ALL_USERS, {
    skip: !dataB,
    onCompleted: () => {

    //consoles the list of all users present
    console.log(dataA.users);
    },
    onError: (error) => {
    //in case of error, it prints the error message in the console
    console.error(error.message)
  });

위의 예제에서 나는 두 가지 조회를 가지고 있다.

GET_USER: 이 사용자 이름과 관련된 모든 상세한 정보를 얻기 위해 username 변수로 보냅니다.dataB를 통해 수신된 데이터에 액세스할 수 있습니다.CurrentUserDedtailsVars는 제가 보낸 데이터 형식, 즉 사용자 이름입니다. CurrentUserDetails 제가 조회에 성공했을 때 받은 데이터 형식입니다.이러한 유형은 별도의 파일에 저장됩니다.

export interface Member {
  user_id: string;
  user_name: string;
  role: string;
  invitation: string;
  name: string;
  email: string;
  joined_at: string;
}

export interface Project {
  members: Member[];
  name: string;
  id: string;
}

export interface UserDetails {
  username: string;
  projects: Project[];
  name: string;
  email: string;
  id: string;
  company_name: string;
  updated_at: string;
  created_at: string;
  removed_at: string;
  is_email_verified: string;
  state: string;
  role: string;
}

export interface CurrentUserDetails {
  getUser: UserDetails;
}

export interface CurrentUserDedtailsVars {
  username: string;
}

ALL_USERS: 이 쿼리는 dataA를 통해 액세스할 수 있는 모든 사용자의 목록을 가져오는 데 사용됩니다.

skip: 이것은 부울 값입니다. 만약true라면, 조회를 건너뜁니다.상기 논리에서 dataB 가 비어 있으면 GET_USER 조회가 성공할 때까지ALL_USERS 조회를 건너뜁니다.dataA를 채우면 두 번째 조회를 실행합니다.이 옵션은 특정 순서대로 질의를 수행해야 하는 경우에 유용합니다.

돌변하다

구조

export const SEND_INVITE = gql`
  mutation sendInvite($member: MemberInput!) {
    sendInvitation(member: $member) {
      user_id
      user_name
      role
      invitation
    }
  }
`;

SEND_INVITE 변이 문자열은 선택한 항목에 대한 초대장을 사용자에게 보내는 데 사용됩니다.일단 사용자가 초청을 받아들인다면, 그/그녀도 이 프로젝트의 구성원이 될 것이다.MemberInput로서 프로젝트 id, 초대장을 보낼 사용자의 사용자 이름, 프로젝트 이름Viewer 또는 Editor의 역할을 포함하여 데이터를 보내야 합니다.
돌연변이 사용

 // mutation to send invitation to selected users
  const [SendInvite, { error: errorB, loading: loadingB }] = useMutation<
    MemberInviteNew
  >(SEND_INVITE, {
    refetchQueries: [{ query: GET_USER, variables: { username } }],
  });

상기 변이에서 초대장을 보내면 GET_USER 조회를 다시 추출하여 데이터를 업데이트합니다.MemberInviteNew는 내가 변수로 변이 문자열에 보낸 데이터 형식이다.인터페이스 정의는 다음과 같습니다.

export interface MemberInviteNew {
  member: {
    project_id: string;
    user_name: string;
    role: string;
  };
}

SendInvite는 돌연변이 함수로 언제든지 그것을 호출해서 돌연변이를 실행할 수 있다.

 SendInvite({
   variables: {
       member: {
             project_id: "1234abc",
             user_name: "john_doe",
             role: "Editor",
               },
              },
            })

결론

이것은 GraphQL 변이 및 질의의 예입니다.나는 내가 이 개념들을 잘 해석할 수 있기를 희망하지만, 만약 당신이 아직 약간의 의문이나 피드백이 있다면 언제든지 연락하십시오.Litmuschoos 프로젝트는 원본을 완전히 개방하기 때문에 가능한 모든 방식으로 공헌할 수 있습니다.참관GitHub repo은 수많은 관성자 중의 한 사람이 되었다.

Litmuschoos 회사 / 리트머스

Litmus는 SRE와 개발자가 클라우드 네이티브 방식으로 혼돈 프로젝트를 실천하도록 도와줍니다.혼돈 실험은 《조서》에 발표되었다 (https://hub.litmuschaos.io). 커뮤니티 노트https://hackmd.io/a4Zu_sH4TZGeih-xCimi3Q

리트머스

운원생 혼돈 공사

다른 언어로 읽다.

🇰🇷 🇨🇳 🇧🇷 🇮🇳

개요

Litmus는 운원생 혼돈 공사에 사용되는 도구 모음이다.Litmus는 Kubernetes에서 혼란을 조정하는 도구를 제공하여 SRE가 배포 중의 약점을 발견하도록 도와줍니다.SRE는 리트머스를 사용하여 처음에 임시 저장 환경에서 혼돈 실험을 실행했고 최종적으로 생산 과정에서 버그와 빈틈을 찾았다.이런 약점을 복구하면 시스템의 탄력을 높일 수 있다.
Litmus는 클라우드 네이티브 방법으로 혼란을 생성, 관리, 모니터링합니다.다음 Kubernetes CRD(사용자 정의 리소스 정의)를 사용하여 혼돈을 구성합니다.

ChaosEngine: Kubernetes 응용 프로그램이나 Kubernetes 노드를 ChaosExperiment 리소스에 연결합니다.Litmus의 혼돈 산자로 ChaosEngine을 관찰한 후 혼돈 실험

을 호출합니다

혼돈 실험: 혼돈 실험의 모드 파라미터를 그룹으로 나누는 자원.ChaosExperiment CR은 조작자가 ChaosEngine에서 실험을 호출할 때 생성됩니다.

ChaosResult:A resource to…

View on GitHub
마지막으로 가장 중요하지 않은 점은 곧 다가올 해킹 데이에 따라 각 단계마다 좋은 첫 번째 문제, 앞부분 문제, 복잡한 문제 등 문제가 많다는 것이다. 따라서 초보자라도 PR을 제출하고 개원에 기여할 수 있다.기회를 잡아 합병에 성공한 후 많은 리트머스봉과 사탕을 얻었다.따라서 Litmus site 구경하고 우리 community (#Kubernetes Slack의 리트머스 해협) 에 가입하는 것을 잊지 마세요.😇