정보실

웹학교

정보실

php 워드 프레스 테마에서 아폴로와 GraphQL을 사용하는 방법

본문

이 시리즈의 마지막 부분에서는 WordPress 테마에 React를 포함 시키는 방법을 살펴 보았습니다. 

이 튜토리얼에서는 JavaScript를 사용하여 데이터를 요청하기 위해 WordPress GraphQL 플러그인과 Apollo를 빌드하고 설정하는 방법을 살펴 보겠습니다.


https://dev.to/zgordon/using-apollo-and-wpgraphql-in-a-wordpress-theme-538j 


아폴로 및 WPGraphQL 및 REST API 및 WP 가져 오기 API 


WordPress는 REST API와 함께 제공됩니다. 이것은 Fetch API 또는 다른 AJAX 라이브러리와 함께 사용하기에 훌륭하고 쉽습니다. 

관심이 있으시다면 이 두 가지를 다루는 방법에 대한 좋은 튜토리얼과 비디오가 있습니다. 

그러나 REST API 작업은 필요한 데이터를 얻기 위해 여러 번의 API 호출을 수행해야 하는 공통적인 필요성 때문에 크게 인기를 얻지 못하고 있습니다.


WP GraphQL 플러그인은 WordPress Core와 함께 제공되지 않지만 GraphQL 엔드 포인트를 WordPress에 추가합니다. GraphQL은 주로 사용하기 쉬우며 REST API를 사용하여 여러 쿼리를 수행하는 쿼리를 하나의 쿼리로 가져올 수 있기 때문에 데이터를 얻는 데 선호 되는 방법입니다.


Apollo는 GraphQL 요청을 만들기 위해 라이브러리로 이동하므로 테마 코드와 함께 번들로 묶습니다.


워드 프레스에서 GraphQL 설정하기 


WordPress에서 GraphQL로 설정하려면 먼저 WP GraphQLWP GraphiQL 플러그인을 설치해야 합니다. 

첫 번째는 GraphQL 서버를 활성화하고 두 번째는 쿼리를 만들고 사용 가능한 데이터를 살펴보기 위한 인터페이스를 제공합니다.


WP GraphiQL Installed 


GraphiQL이 시작되고 실행될 때의 모습입니다 (사후 요청 포함). WP GraphQL을 처음 사용하는 경우 사용 가능한 모든 것을 보고 탐색기를 통해 쉽게 쿼리 할 수 있는 것이 매우 흥미롭습니다.


테마에서 아폴로 설정 


여기에서 사용 중인 예제 테마를 볼 수 있습니다. 우리는 마지막 튜토리얼에서 멈춘 곳을 픽업 할 것입니다.


가장 먼저 해야 할 일은 Apollo와 관련 패키지를 설치하는 것입니다. 테마의 루트에서 이것을 실행하십시오.


npm install apollo-boost @apollo/react-hooks graphql

이제 최근 게시물을 쿼리하여 페이지에 표시 할 수 있는 새로운 파일을 설정하겠습니다.


우리는 posts 폴더와 그 안에 index.js 파일이 있는 components 폴더를 추가 할 것입니다.


/build
/src
-- /components
   -- /posts
      -- index.js
   -- index.js
functions.php
package.json
page-react.php
style.css
webpack.config.js


기본 /src/index.js 파일에서 다음과 같이 Apollo 클라이언트를 설정합니다.


const { render } = wp.element;
import { ApolloProvider } from "@apollo/react-hooks";

const client = new ApolloClient({
  uri: "http://react-dev.local/graphql"
});

const App = () => {
  return (
    <ApolloProvider client={client}>
      <div>
        <h1>My First Apollo Theme!</h1>
      </div>
    </ApolloProvider>
  );
};
render(<App />, document.getElementById(`react-app`));


그러면 WordPress 사이트에서 GraphQL 끝점을 ping하도록 Apollo 클라이언트가 설정됩니다. 사이트의 URL과 일치하도록 해당 URL을 변경할 수 있습니다.


그런 다음 코드를 Apollo Provider 안에 넣습니다. 그러면 이 클라이언트가 포함 된 모든 구성 요소에 이 클라이언트를 사용할 수 있습니다.


이제 게시물을 쿼리하고 표시하는 게시물 구성 요소를 작성하는 방법을 살펴 보겠습니다.


Apollo를 사용하여 WordPress 게시물 목록 작성 


이제 /src/components/posts/index.js 파일을 여십시오. 가장 먼저 할 일은 React 후크를 사용하고 GraphQL 쿼리를 만드는 데 필요한 라이브러리를 가져 오는 것입니다.


import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";


그런 다음 아래에서 게시물을 얻는 데 사용할 쿼리를 작성할 수 있습니다.


const POSTS_QUERY = gql`
  {
    posts {
      nodes {
        postId
        title(format: RENDERED)
      }
    }
  }
`;


이것은 게시물 제목과 ID를 얻는 매우 간단한 쿼리입니다.


다음으로 쿼리를 작성하고 로딩 메시지를 표시하고 오류 메시지가 있는 경우 오류 메시지를 표시 한 다음 마지막으로 게시물을 표시하는 실제 게시물 구성 요소를 작성할 수 있습니다.


const Posts = () => {
  const { loading, error, data } = useQuery(POSTS_QUERY);

  if (loading) return <p>Loading Posts...</p>;
  if (error) return <p>Something wrong happened!</p>;

  const posts = data.posts.nodes;
  return posts.map(({ postId, title }) => <h3 key={postId}>{title}</h3>);
};


이것은 매우 간단한 설정입니다. 여기에 모두 같이 보이는 것이 있습니다


import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";

const POSTS_QUERY = gql`
  {
    posts {
      nodes {
        postId
        title(format: RENDERED)
      }
    }
  }
`;

const Posts = () => {
  const { loading, error, data } = useQuery(POSTS_QUERY);

  if (loading) return <p>Loading Posts...</p>;
  if (error) return <p>Something wrong happened!</p>;

  const posts = data.posts.nodes;
  return posts.map(({ postId, title }) => <h3 key={postId}>{title}</h3>);
};

export default Posts;


이것이 이 구성 요소에 필요한 모든 것입니다. 

이제 src/index.js 파일로 가져 와서 <ApolloProvider> 태그 안에 넣을 수 있습니다.


게시물 컴포넌트 렌더링 


src/index.js 파일을 업데이트하여 Posts 컴포넌트를 가져 와서 페이지에 표시하십시오.


const { render } = wp.element;
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
import Posts from "./components/posts";

const client = new ApolloClient({
  uri: "http://react-dev.local/graphql"
});

const App = () => {
  return (
    <ApolloProvider client={client}>
      <div>
        <Posts />
      </div>
    </ApolloProvider>
  );
};
render(<App />, document.getElementById(`react-app`));


거기에 있습니다! 이제 WP GraphQL을 쿼리하고 게시물을 요청하기 위한 Apollo 클라이언트 설정이 완료되었습니다.


여기에서 WP GraphQL이 얻는 모든 것을 쿼리 하기 위해 필요에 따라 이를 수정할 수 있습니다.


다음 시리즈에서는 WP GraphQL을 확장하고 데이터를 변경하는 방법을 살펴 보겠습니다. 이를 위해 게시물에 간단한 레딧 스타일 투표 기능을 추가합니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 28회 ]  작성일19-12-14 12:40

웹학교