Reactjs 使用GraphQL按字符串查询Wordpress帖子

我有一个无头wordpress安装，有一个React前端，可以查询wordpress的帖子。我正在尝试创建一个搜索功能，它允许我从url查询字符串（通过使用

const searchQuery=window.location.search.split（“？q=“）[1]

）检索）中按搜索词加载帖子，这给了我要搜索的字符串

但是，我得到了错误“error:GraphQL error:No post exists with this id:”

我的GraphQL查询如下：

 query postQuery($slug: String) {
  postBy(slug: $slug) {
    id
    slug
    status
    title
    content
    blocks {
        tagName
        type
        attributes,
        innerHtml
    }
  }
}

我尝试在这里实现这个示例：，但似乎请求不是我所需要的。我也试过这个例子：，但同样，这不起作用

这里有两个问题：1）如何在GraphQL请求中使用变量

searchQuery

中的搜索词，以及2）如何正确形成查询，以便使用搜索词搜索并返回任何文章标题或文章内容中包含搜索词的文章

更新

我已使用与应用程序其余部分不同的查询更新了代码，但现在在页面

GraphQL错误：无法查询类型“RootQueryToPostConnection”上的字段“title”。GraphQL错误：无法查询类型“RootQueryToPostConnection”上的字段“内容”

const SEARCH_QUERY = gql`
        query searchPostQuery($searchStr: String) {
          posts(where: {search: $searchStr}) {
            title
            content
          }
        }
    `;

    const APP_QUERY = gql`
      query appQuery($locationId: MenuLocationEnum!) {
       ...
    }`;

    const searchQuery = window.location.search.split("?q=")[1];
    function App(props) {
      return (
        <ApolloProvider client={graphClient}>
            <Query query={window.location.pathname === "/search-results" ? SEARCH_QUERY : APP_QUERY} variables={{ locationId: "HEADER_MENU", searchStr: searchQuery }}>
              {({ data, loading, error, client }) => {
                if (loading) return "loading...";
                if (error) return <p>ERROR: {error.message}</p>;
                     return (
                  <>
                    <Query query={HEADER_QUERY}>
                      {({ data, client: headerClient }) => {
                      return (
                      <>
                      <Router>
                         ...
                        <SearchResults
                           path="/search-results"
                        />
                      </Router>
                  </>
                 );
                }}
         </Query>
      </ApolloProvider>
   );
}

const SEARCH\u QUERY=gql`
查询searchPostQuery（$searchStr:String）{
帖子（其中：{search:$searchStr}）{
标题
内容
}
}
`;
const APP_QUERY=gql`
query-appQuery（$locationId:MenuLocationEnum！）{
...
}`;
const searchQuery=window.location.search.split（“？q=”）[1]；
功能应用程序（道具）{
返回(
{（{数据，加载，错误，客户端}）=>{
如果（加载）返回“加载…”；
if（error）返回错误：{error.message}
；
返回(
{（{数据，客户端：headerClient}）=>{
返回(
...
);
}}
);
}

搜索不是标准化的……它取决于实现、提供者意图等

postBy（slug:$slug）

在这种情况下将返回由键/值slug标识的[仅一个]post

常规（在github上找到）WP搜索查询形状：

{
  posts(where: {search: "cats"}) {
    nodes {
      id
      title
      content
    }
  }
}

searchQuery

可以从位置或

react router

读取。您可以使用变量将其传递到查询中，例如：

query searchPostQuery($searchStr: String) {
  posts(where: {search: $searchStr) {
    nodes {
      id
      slug
      status
      title

---

当然，您可以在

/graphiql

中测试查询（在前端使用之前）-变量可以在查询下面定义。

搜索不是标准化的…它取决于实现、提供者意图等

postBy（slug:$slug）

在这种情况下将返回由键/值slug标识的[仅一个]post

常规（在github上找到）WP搜索查询形状：

{
  posts(where: {search: "cats"}) {
    nodes {
      id
      title
      content
    }
  }
}

searchQuery

可以从位置或

react router

读取。您可以使用变量将其传递到查询中，例如：

query searchPostQuery($searchStr: String) {
  posts(where: {search: $searchStr) {
    nodes {
      id
      slug
      status
      title

---

当然，您可以在

/graphiql

中测试查询（在前端使用之前）-变量可以在下面的查询中定义。

感谢您的解释和代码示例。我已经根据您的建议更新了我的代码（在上面的问题中添加了更新）并简化了要查询的字段，但现在我得到了错误：GraphQL错误：无法查询“RootQueryToPostConnection”类型上的字段“title”。GraphQL错误：无法查询“RootQueryToPostConnection”类型上的字段“content”。我尝试过四处搜索，但不确定为什么会收到此错误。有什么想法吗？抱歉，缺少

节点

“级别“…在游乐场编辑器提示中，可能的字段/名称/结构感谢您的解释和代码示例。我已根据您的建议更新了我的代码（在上述问题中添加了更新），并简化了要查询的字段，但现在我收到错误：GraphQL错误：无法查询“RootQueryTopConnection”类型上的字段“title”.GraphQL错误：无法查询“RootQueryToPostConnection”类型上的字段“内容”。我已尝试四处搜索，但不确定收到此错误的原因。有什么想法吗？抱歉，缺少

节点

“级别”…在操场编辑器中提示可能的字段/名称/结构