首页 > 解决方案 > 使用 apollo-link-rest 发送纯文本请求正文

问题描述

我正在尝试向一个端点发送一个 POST 请求,该端点需要一个application/x-www-form-urlencoded Content-Type带有模块的表单数据和一个纯文本字符串,apollo-link-rest并且遇到了最困难的时间。

在 cURL 表单中,我想要发出的请求如下所示:

curl -X POST http://tld.com/search -d include_all=My%20Search%20Term

我已经像这样将我的主要组件包装在graphqlHOC 中react-apollo

export default graphql(gql`
  mutation productSearch($input: string) {
    search(input: $input) @rest(
      path: "/search",
      method: "post",
      endpoint: "search",
      bodySerializer: "search"
    ) {
      total
    }
  }
`,
{
  props: ({ mutate }) => ({
    runSearch: (text: string) => {
      if (mutate) {
        mutate({
          variables: {
            input: `include_all=${encodeURIComponent(text)}`,
          },
        });
      }
    },
  }),
})(SearchResults);

查询bodySerializer中引用的搜索如下所示。

const searchSerializer = (data: any, headers: Headers) => {
  headers.set('Content-Type', 'application/x-www-form-urlencoded');
  return { body: data, headers };
};

然后runSearch在我的组件中调用了这样的函数。

async componentDidMount() {
  try {
    const result = await this.props.runSearch(this.props.searchText);
  } catch (error) {
    // report error & show message
  }
}

现在我意识到我没有对结果做任何事情,但是在运行搜索代码时似乎有一个未处理的承诺拒绝(这是 React Native 用黄色框警告告诉我的)。我也在用 Reactotron 检查请求,请求看起来不错,但仍然失败。我想知道我是否遗漏了我的配置apollo-link-rest方式,或者是否有更好的方法可以检查来自 Apollo 客户端的请求。

在这里的任何帮助将不胜感激。谢谢!

标签: react-nativegraphqlapolloreact-apolloapollo-link-rest

解决方案


所以事实证明我上面的所有设置都正确。react-apollo我的 Info.plist 文件不是问题,而是问题。我没有启用 iOS 应用程序发出 HTTP 请求的能力。它只允许HTTPS。我用我的 Info.plist 中的这个条目修复了它。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

推荐阅读