如何将超图(GraphCMS) graphql查询传递给元素/ div (映射查询到元素)

Question

我不知道如何通过代码访问元素的查询。

我有查询请求，但我现在知道如何获取查询并将查询映射到元素。

以下是查询提取的代码：

import { request, gql } from "graphql-request";

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;

export const getPosts = async () =\> {
const query = gql`    query MyQuery {       postsConnection {         edges {           node {             author {               bio               name               id               photo {                 url               }             }             createdAt             slug             title             excerpt             featuredImage {               url             }             categories {               name               slug             }           }         }       }     }  `;

const results = await request(graphqlAPI, query);

return results.postConnection.edges;
};

这里是我指定端点的地方：

NEXT_PUBLIC_GRAPHCMS_ENDPOINT=https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cl9pn1q9a1ubu01t243uj1rnr/master

下面是我想象的这样做，但无法访问适当的属性/查询：

import { getPosts } from "../services/GraphRequests";
import React from "react";

function Blog() {
  return <div>{getPosts}</div>;

or

return <div>getPosts.map or something)


}

export default Blog;

以下是我试图获取数据的方式：

import React from "react";
import { useEffect, useState } from "react";
import request from "graphql-request";

function Blog() {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      const { posts } = await request(
        "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cl9pn1q9a1ubu01t243uj1rnr/master",

        `{postsConnection {
          edges {
            node {
              author {
                bio
                name
                id
                photo {
                  url
                }
              }
              createdAt
              slug
              title
              excerpt
              featuredImage {
                url
              }
              categories {
                name
                slug
              }
            }
          }
        }}`
      );

      setPosts(posts);
    };

    fetchPosts();
  }, []);

  return <div>{console.log(posts)}</div>;
}
export default Blog;

Answer 1

我就是这样做的：

    import React from "react";

import request, { gql } from "graphql-request";

function Blog() {
  const QUERY = gql`
    query MyQuery {
      postsConnection {
        edges {
          node {
            author {
              bio
              name
              id
              photo {
                url
              }
            }
            createdAt
            slug
            title
            excerpt
            featuredImage {
              url
            }
            categories {
              name
              slug
            }
          }
        }
      }
    }
  `;
  const theFetchedData = request(
    "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cl9pn1q9a1ubu01t243uj1rnr/master",
    QUERY
  ).then((data) => console.log(data));

  return <div>{JSON.stringify(theFetchedData)}</div>;
}

export default Blog;