Question

以下是回复信息：

“％PDF-1.4 \ n％ \ n2 0 obj \ n＆lt;＆gt; stream \nx X s F\u0010 \ u0019 \ n $ \ u0010JaF \ u000f \ t \吨*：Iw的：H-ڀ克/}] YKZ \ u00020Vڈ＆安培; \nɐֳ大号\ u0012 4 \ u000bi \ u001bD \ u0017 \ tP的ق的Y1 \ u0019p \ u0010：\ - gOǜF\ u0019L＆安培; _c6' \ u0016cvfhm ҏ;ǴKUd\ u0007 QG {，KM \ u001e） - EGU¢\ u0019 \ U0003（Q2R？！ \ u001c％KVC [;Ĵ\ u0004EPOhHdk \ u0011 \ fN的騈\ u000fs = 89 \ u001fY \ u00185t ！\ u001dA0Sa \ u000ei \ u000f（1RQ＆GT; \ u0017i \ u0017＆LT; $ \ u0015; | / ^; VH \ u00191 \吨@毫升\ u00137q \ U0004 \\ u0010ְ'M鸭\ u000b09B1ێ= K，Z \ “' \u0019 3 W\ u0010q \u0000A D Hh \u0017 c k ̉ i W\u000b Mph�P�#��0W:ʥ\u0003�*ӕ�9��\u0015OG��\u000e�$A)>�\u0018H*�R�1 7��~ch\u001a�CUfQ�j�9��+��K��Џ�\u001a{�G��)\f�D\u0012\f��(C\u0005��?ݗ��m��c��0Ϩ�v@*@Hp�\u0019�Y�!��7�-�\u001b�a�w�3��&�T0q=�K�-ؚ�\u0018 \ u000e） ] NP \ u0019ZB $ W \ u0015 \ u0006n＆安培; 6 |

Answer 1

嘿，是的，但需要一些定制的工作！

以下是如何使用scaphold.io进行操作的方法，但您也可以将其扩展到您自己的实现中！

基本上发生的事情是您在multipart / form-data请求的根级别附加文件，然后从GraphQL变量的输入中指向请求中文件的键。下面是一些代码，用于展示如何使用文件就绪的网络接口进行改造和ApolloClient实例，然后可以将其输入Angular2Apollo。

import { createNetworkInterface } from 'apollo-client';

// Create a file-ready ApolloClient instance.
export function makeClientApolloFileHandler() {
  const graphqlUrl = `https://scaphold.io/graphql/my-app`;
  const networkInterface = createNetworkInterface(graphqlUrl);
  networkInterface.query = (request) => {
    const formData = new FormData();

    // Parse out the file and append at root level of form data.
    const varDefs = request.query.definitions[0].variableDefinitions;
    let vars = [];
    if (varDefs && varDefs.length) {
      vars = varDefs.map(def => def.variable.name.value);
    }
    const activeVars = vars.map(v => request.variables[v]);
    const fname = find(activeVars, 'blobFieldName');
    if (fname) {
      const blobFieldName = fname.blobFieldName;
      formData.append(blobFieldName, request.variables[blobFieldName]);
    }

    formData.append('query', printGraphQL(request.query));
    formData.append('variables', JSON.stringify(request.variables || {}));
    formData.append('operationName', JSON.stringify(request.operationName || ''));

    const headers = { Accept: '*/*' };
    if (localStorage.getItem('scaphold_user_token')) {
      headers.Authorization = `Bearer ${localStorage.getItem('scaphold_user_token')}`;
    }

    return fetch(graphqlUrl, {
      headers,
      body: formData,
      method: 'POST',
    }).then(result => result.json());
  };

  const clientFileGraphql = new ApolloClient({
    networkInterface,
    initialState: {},
  });
  return clientFileGraphql;
}

在此函数对请求执行其操作后，您可能具有看起来像这样的FormData（如果它以JSON编码）：

{
  "query": "mutation CreateFile($input:CreateFileInput) { createFile(input: $input) { ... }",
  "variables": {
    "input": {
      "blobFieldName": "myFile",
      "name": "MyFileName!"
    }
  },
  // Note how the blobFieldName points to this key
  "myFile": <Buffer of file data in multipart/form-data>
}

然后，服务器需要了解如何解释此问题，以便在有效负载中查找文件并将其与正确的对象等相关联。

希望这有帮助！

嗨，有没有办法通过apollo2angular和graphql获取pdf文件？

1 个答案: