在 graphql 查询中传递查询 url 参数（Next js）

Question

我正在尝试通过下一个 js 应用程序中的 url 中的 slug 参数获取内容。使用 getServerSideProps 时，我可以传递一个 context.query.id，但这里我尝试使用 getStaticProps。这是我目前所拥有的：

export async function getStaticProps() {
  const apolloClient = initializeApollo();
  const { data } = await apolloClient.query({
    query: SLUG_QUERY,
  });

  return addApolloState(apolloClient, {
    props: {
      data,
    },
    revalidate: 60,
  });
}

const SLUG_QUERY = gql`
  query ($id: String!) {
    postCollection(slug: { eq: $id }) {
      items {
        title
        shortDescription
        heroImg {
          url
        }
        createdAt
        slug
      }
    }
  }
`;

我很难理解如何将 conbtext.query.id 作为参数传递给 gql 查询。感谢帮助

Answer 1

将上下文传递到您的 getStaticProps 函数中

export const getStaticProps = async (context) => {

然后将您的查询移到 getStaticProps 中以使用它

postCollection(slug: { eq: $context.params.id }) {

或者，如果您希望将查询保留在函数之外（例如，如果您在其他地方重复使用它），则只需将其包装在一个将 id 作为参数的函数中

const getPostCollectionQuery = (id) => {
  const SLUG_QUERY = gql`
    query ($id: String!) {
      postCollection(slug: { eq: $id }) {
        items {
          title
          shortDescription
          heroImg {
            url
          }
          createdAt
          slug
        }
      }
    }
  `;

  return SLUG_QUERY;
};

然后您可以从 getStaticProps 函数中调用它

const { data } = await apolloClient.query({
  query: getPostCollectionQuery(context.params.id),
});

在 graphql 查询中传递查询 url 参数（Next js）

Pass a query url param inside a graphql query (Next js)

reactjs

graphql

next.js