Apollo-Composable을 사용한 GraphQL 및 Vue Composition API

이 게시물에서는 GraphQL의 기본 사항을 이해하고 있지만 VueJS 에서 GraphQL 과 함께 Vue Composition API 를 사용하는 방법에 관심이 있다고 가정합니다.

GraphQL 정보 : GraphQL Fullstack Tutorial for GraphQL에 대한 전체 개요를 얻을 수있는 가장 좋은 곳 중 하나입니다 .

GraphQL 서버를 빠르게 가동하기

이것이 도움이 되려면 작업 할 graphql 서버가 필요합니다. 과거에는 json 파일을 기반으로 한 데이터로 로컬 서버를 빠르게 회전 할 수있는이 훌륭한 패키지를 찾을 때까지 항상 도전이었습니다.

json-graphql-server에 대한 문서를 참조하십시오.

npm install -g json-graphql-server

// db.js - in project root directory
module.exports = {
    posts: [
        { id: 1, title: "Lorem Ipsum", views: 254, user_id: 123 },
        { id: 2, title: "Sic Dolor amet", views: 65, user_id: 456 },
    ],
    users: [
        { id: 123, name: "John Doe" },
        { id: 456, name: "Jane Doe" }
    ],
    comments: [
        { id: 987, post_id: 1, body: "Consectetur adipiscing elit", date: new Date('2017-07-03') },
        { id: 995, post_id: 1, body: "Nam molestie pellentesque dui", date: new Date('2017-08-17') }
    ]
}

$ json-graphql-server db.js
GraphQL server running with your data at http://localhost:3000/

VueJS 앱 설정하기

apollo-composable에 대한 문서를 참조하십시오.

vue-cli를 사용하여 기본 프로젝트를 설정 한 후 apollo-composable및 graphql에 필요한 패키지를 추가해야합니다 .

(문서화 목적으로 만 별도의 줄에 있음)

npm install @vue/apollo-composable
npm install @vue/composition-api
npm install apollo-boost
npm install graphql
npm install vue-apollo

API 통합을위한 가져 오기를 추가하고 Apollo 클라이언트를 만듭니다.

// GRAPHQL STUFF
import VueCompositionApi, { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
import ApolloClient from 'apollo-boost'

// client apollo client
const apolloClient = new ApolloClient({
  connectToDevTools: true,
    uri: "http://localhost:3000"
})

이제 컴포지션 API에서 제공된 함수를 사용하여 응용 프로그램의 다른 구성 요소에서 아폴로 기능을 사용할 수 있도록합니다.

new Vue({
  // add the client to vue object
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
  render: h => h(App),
}).$mount('#app')

GraphQL에 대해 자세히 살펴 보지 않으므로 쿼리와 예상되는 출력에 대해 간단히 설명하겠습니다.

// QUERY
const ALL_POST_QUERY = gql`
  {
    allPosts {
      id
      title
      user_id
    }
  }
`;

{
  "data": {
    "allPosts": [
      {
        "id": "1",
        "title": "Lorem Ipsum",
        "user_id": "123"
      },
      {
        "id": "2",
        "title": "Sic Dolor amet",
        "user_id": "456"
      },
      {
        "id": "10",
        "title": "test",
        "user_id": "10"
      },
    ]
  }
}

에서 HelloWorld.vue구성 요소, 우리는 우리의 쿼리를 추가하고 새로운 구성 API를 지원하는 스크립트 섹션을 비계해야합니다.

먼저 가져 오기와 쿼리를 상수로 추가합니다.

<script>
import { gql } from "apollo-boost";
import { useQuery } from "@vue/apollo-composable";
// QUERY
const ALL_POST_QUERY = gql`
  {
    allPosts {
      id
      title
    }
  }
`;

useQuery컴포저 블이 다음을 반환하는 것을 볼 수 있습니다.

  • result -쿼리의 데이터 응답
  • loading-참 | false는 쿼리의로드 상태를 나타내며 쿼리의 시각적 상태를 제공하는 데 사용할 수 있습니다.
  • error -적절한 경우 오류 정보

export default {
  name: "HelloWorld",
  setup() {
    // QUERY
    const { result, loading, error } = useQuery(
      ALL_POST_QUERY
    );
return {
      result,
      loading,
      error
    };
  },
  methods: { }
};
</script>

<template>
  <div>
    <button @click="addPost">ADD POST</button>
    <div v-if="loading">
      <h2>Loading</h2>
    </div>
     <div v-else-if="error">
      <h2>{{error}}</h2>
    </div>
    <div v-else>
      <h2>Query Results</h2>
      <div v-for="p in result.allPosts" :key="p.id">{{p}}</div>
    </div>
  </div>
</template>

이 변형은 데이터 세트에 게시물을 추가합니다. 구성 방법에는 다음과 같은 형식의 쿼리 매개 변수가 필요합니다.

{ title: "New Post Title", id : 100, userId : 10 }
// MUTATION
const ADD_POST_MUTATION = gql`
  mutation createPost($title: String!, $id: ID!, $userId: ID!) {
    createPost(title: $title, views: 0, user_id: $userId, id: $id) {
      id
      title
    }
  }
`;

createPost구성 요소에 바인딩 될 쿼리를 실행하기 위해 호출하도록 노출 된 함수에 액세스 할 수 있도록 구조화 되어 있습니다.

참고 우리는 이미 반환되기 때문에 loading& error에서 useQuery우리는 우리가 약간 다르게 반환하는 객체를 구성 할 필요가있다.

// QUERY
const { result, loading, error } = useQuery(
  ALL_POST_QUERY
);
// MUTATION <== NEW
const {
  loading: mLoading,
  error: mError,
  mutate: createPost
} = useMutation(ADD_POST_MUTATION);
return {
  result,
  loading: loading || mLoading, <== NEW
  error: error || mError,       <== NEW
  createPost                    <== NEW
};
//

<template>
  <div>
    <input type="text" v-model="title" placeholder="enter the title" />
    <button @click="addPost">ADD POST</button>
...
</div>
</template>

항목이 목록에 추가 된 후 목록에 표시되지 않는 것을 알 수 있습니다. 클라이언트는 항목이 이미있는 경우 "업데이트"하지만 새 항목을 캐시에 자동으로 추가하지 않습니다. 그렇게해야합니다.

UI를 업데이트 할 로컬 아폴로 캐시를 업데이트하는 데 사용할 수 있는 update옵션 이 있습니다 useQuery.

업데이트 함수가 호출 될 때 우리가 얻는 데이터는 우리가 돌연변이에서 정의한 응답으로 형성됩니다.

data: {
  createPost: {
    id: "1586711727281"
    title: "adssad"
    views: 0
    user_id: "200"
    __typename: "Post"
  }
}

// MUTATION
const {
  loading: mLoading,
  error: mError,
  mutate: createPost
} = useMutation(ADD_POST_MUTATION, {
  update: (cache, { data: { createPost } }) => {
    // get the posts from the cache...
    const data = cache.readQuery({ query: ALL_POST_QUERY });
    // add the new post to the cache
    data.allPosts.push(createPost);
    // write results back to cache
    cache.writeQuery({ query: ALL_POST_QUERY, data });
  }
});

이것으로이 게시물을 마치겠습니다. 다음 부분에서는 업데이트를 추가하고 삭제 한 다음 UI를 약간 정리하여 더보기 좋게 만듭니다.

json-graphql-server : https://github.com/marmelab/json-graphql-server
@ vue / apollo-composable : https://v4.apollo.vuejs.org/guide-composable

비디오

Suggested posts

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 개발자가 알아야 할 필수 개념과 교훈이 많이 있지만 대부분의 튜토리얼에서는 다루지 않습니다. 나는 당신이 알아야 할 가장 중요한 주제 중 일부를 직접 골랐지만, 자세히 다루기 위해 시간을 할애 한 기사는 거의 없습니다.

Express.js 시작하기

Express.js 시작하기

Express는 웹 및 모바일 앱을 만드는 경험을 즐겁게 만드는 기능 세트가 포함 된 Node.js 프레임 워크입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.