GraphQl 查询问题

Question

我正在使用this starter 来构建我的博客。 默认情况下，您将访问文章页面：http://localhost:3000/article?id=1，我也希望：http://localhost:3000/article?slug=myslug。

我的文章控制器如下：

module.exports = {
  async findOne(ctx) {
    //check if the params id is an id or a slug
    const { id } = ctx.params;

    // if you use MongoDB database
    // we are validating that the id match ObjectID format
    if (id.match(/^[0-9a-fA-F]{24}$/)) {
      const entity = await strapi.services.article.findOne(ctx.params);
      return sanitizeEntity(entity, { model: strapi.models.article });
    }

    // findOne function works only with IDs
    // so we find all and get first entry by using slug
    const [entity] = await strapi.services.article.find({ slug: id });
    return sanitizeEntity(entity, { model: strapi.models.article });
  }
};

文章配置路由为：

...
    {
      "method": "GET",
      "path": "/articles/:id",
      "handler": "article.findOne",
      "config": {
        "policies": []
      }
    },
    {
      "method": "GET",
      "path": "/articles/:slug",
      "handler": "article.findOne",
      "config": {
        "policies": []
      }
    },
...

如果我执行http://localhost:1337/articles?id=1 或http://localhost:1337/articles?slug=this-is-my-title，我会按预期返回内容。

但是，当我点击http://localhost:3000/article?slug=this-is-my-title 我得到以下信息：

在 pages 文件夹内（使用 Next.js 构建的前端）我有 pages/article:

const Article = () => {
  const router = useRouter();
  const { data, loading, error } = useQuery(ARTICLE_QUERY, {
    variables: { slug: router.query.slug }
  });
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {JSON.stringify(error)}</p>;

  return (
    <Layout>
      {console.log(data)}
    </Layout>
  );
};

ARTICLE_QUERY 是：

const ARTICLE_QUERY = gql`
  query Articles($slug: String!) {
    article(slug: $slug) {
      id
      title
      content
      image {
        url
      }
      category {
        id
        name
      }
      published_at
    }
  }
`;

是否需要任何进一步的配置来解决这个问题？

Answer 1

错误来自更严格的类型检查

article 查询需要ID! 参数，提供slug（字符串）不满足此要求。

您需要提供单独的查询（和解析器），例如articleBySlug 以匹配 url 字符串类型参数。

您还需要检查某些父组件中的 url 参数类型以使用正确的查询（呈现不同的子组件）。

Answer 2

经过一番研究，我找到了这个解决方案，考虑到我对 GraphQl 没有太多经验，我不确定它是否正确：

const ARTICLE_QUERY = gql`
  query Articles($slug: String!) {
    articles(where:{slug: $slug}) {
      id
      title
      content
      slug
      image {
        url
      }
      category {
        id
        name
      }
      published_at
    }
  }
`;