Question

我正在尝试将两个变量传递给以下GraphQL查询。

import gql from "graphql-tag";

import { TypedQuery } from "../../core/queries";
import { Article, ArticleVariables } from "./types/Article";

const articleQuery = gql`
  query Article($slug: String!, $slugimg: String!) {
    pageBy(uri: $slug) {
      id
      pageId
      title
      date
      uri
      content(format: RENDERED)
      excerpt
    }
    mediaItemBy(slug: $slugimg) {
      uri
      sourceUrl
    }
  }
`;

export const TypedArticleQuery = TypedQuery<Article, ArticleVariables>(
  articleQuery
);

使用以下代码


type ViewProps = RouteComponentProps<{ slug: string }>;

export const View: React.FC<ViewProps> = ({
  match: {
    params: { slug },
  },
}) => (
  <TypedArticleQuery loaderFull variables={{ slug, slugimg }} errorPolicy="all">
    {({ data }) => {

有什么方法可以创建一个新的slugimg变量，该变量是由RouteComponentProps的slug变量构造的。

例如，如果slug变量的值为“ about-us”，那么我需要slugimg的值为“ about-us-img”

最优雅的方法是什么？

谢谢！

Answer 1

我相信您可以做这样的事情

<TypedArticleQuery loaderFull variables={{ slug, slugimg:slug ==='about-us'?'about-us-img:'' }} errorPolicy="all">

您未声明当值不是“关于我们”时希望的值，因此您可以将''替换为slug或任何您喜欢的值

Answer 2

更通用的假设您想将-img添加到任意值

    export const View: React.FC<ViewProps> = 
({ match: { params: { slug }, }, }) => 
{ const slugimg = ` ${slug}-img` ;
return ( <TypedArticleQuery loaderFull variables={{ slug, slugimg }} errorPolicy="all"> {({ data }) => { –

将两个变量传递到GraphQL查询中，一个从ReactComponentProps中传递，另一个从第一个变量构造

2 个答案: