Question

是否可以将React Apollo配置为将默认查询字符串参数传递给每个查询/突变？

目前，我所有的请求都采用以下格式： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <main role="main"> <div class="container-fluid"> <div class="mx-auto card bg-light"> <div class="card-body"> <h2 class="card-title text-center text-uppercase text-info">Cards</h2> <hr /> <div class="card-columns mx-auto d-flex justify-content-center col-12"> <div class="card text-center col-4"> <div class="card-body"> <h5 class="card-title">Card 1</h5> <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card text-center col-4"> <div class="card-body"> <h5 class="card-title">Card 2</h5> <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </div> </main>;

我想要一些类似的东西： POST https://domain:8000/graphql

这将有助于在Chrome DevTools面板中进行快速调试。

Answer 1

您可以实现一个custom fetch，然后阿波罗的http-link将使用它。

实例化apollo客户端时，请执行以下操作：

const customFetch = (uri, options) => {
  const { operationName } = JSON.parse(options.body);
  return fetch(`${uri}/graph/graphql?opname=${operationName}`, options);
};
const link = createHttpLink({ fetch: customFetch });

将查询参数传递给React Apollo POST请求

1 个答案: