将两个变量传递到 GraphQL 查询中，一个来自 ReactComponentProps，另一个由第一个构建

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">

当它不是 'about-us' 时，您没有说明您希望值是什么，因此您可以将 '' 替换为 slug 或您喜欢的任何内容

Answer 2

更通用，假设您想将 -img 添加到任何 slug 值

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

将两个变量传递到 GraphQL 查询中，一个来自 ReactComponentProps，另一个由第一个构建

Pass two variables into GraphQL query, one from ReactComponentProps, other constructed from first one

apollo

reactjs

graphql