使用WPGraphQL来展示文章的方法

2 年 ago
清, 宇
1 minute

安装方法

请从WP中安装名为wp-graphql的插件。

在文件内写下的内容 xiě xià de

安装文件

import client from '@/apollo-client'
import Posts from '@/graphql/posts'

阿波罗的设置

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: 'http://localhost/graphql', // WPのgraphql先になります。
    cache: new InMemoryCache(),
});

export default client;

我使用Next.js，所以使用getStaticProps来生成静态页面。

export const getStaticProps: GetStaticProps = async () => {
  const data: any = await client.query({
    query: Posts.items(),
    fetchPolicy: 'network-only',
  })

  return {
    props: {
      pictureListContents: data.data.posts.edges,
    },
  }
}

GraphQL。

GraphQL查询的内容

import { gql } from '@apollo/client'

const gqlpost = {
  items: function () {
    return gql`
      query {
        posts {
          edges {
            node {
              id
              title
              excerpt
              date
              postId
              slug
              featuredImage {
                node {
                  uri
                  slug
                  sourceUrl
                }
              }
            }
          }
        }
      }
    `
  },

}
export default gqlpost

以上是关于这个问题的全部内容。
使用方法非常简单。虽然还有其他用法，但这些内容不是专门针对WPGraphQL的，因此本文将不进行介绍。

bannerAds