<p>apollo-link-http respektiert keine GET-Methodenüberschreibung</p>

Erstellt am 12. Nov. 2017  ·  20Kommentare  ·  Quelle: apollographql/apollo-link

Gemäß der fetchOptions , die Methode der Anfrage auf GET . Ich würde erwarten, dass die Abfrage danach als Abfragezeichenfolgenparameter und nicht als Anforderungstext enthalten ist. Chrome gibt einen Fehler aus, wenn Sie versuchen, eine GET-Anfrage mit einem Body zu stellen.

Beabsichtigtes Ergebnis:
Eine Abfragezeichenfolge sollte erstellt werden, wenn die Anforderungsmethode GET ist.

Tatsächliches Ergebnis:
Der Anfragetext wird verwendet.

So reproduzieren Sie das Problem:

client.query({
  context: {
    fetchOptions: {
      method: 'GET',
    },
  },
  query: QUERY,
  variables: { query },
})
enhancement

Hilfreichster Kommentar

@szdc @Outlaw11A @arackaf hier ist, wie es geht:

const customFetch = (uri, options) => {
  const { body, ...newOptions } = options;
  const queryString = objectToQuery(JSON.parse(body));
  requestedString = uri + queryString;
  return fetch(requestedString, newOptions);
};
const link = createHttpLink({
  uri: "data",
  fetchOptions: { method: "GET" },
  fetch: customFetch
});

Alle 20 Kommentare

@szdc ja das geht definitiv nicht! Wären Sie offen für das Hinzufügen? Etwas wie https://github.com/apollographql/apollo-link/issues/257 kann auch eine gute Lösung sein, um die Anfrage vor dem Senden umzuwandeln?

cc @arackaf @outlaw11a @puttyman die alle daran Interesse haben! Sollte eine ziemlich kleine Änderung sein, die hinzugefügt werden muss!

Ich füge es hinzu, wenn niemand anderes will.

@szdc @arackaf also stellt sich heraus, dass dies bereits möglich ist! Ich werde bald einen Test und eine Dokumentation hochschieben, die zeigen, wie dies ohne interne Änderungen möglich ist

@szdc @Outlaw11A @arackaf hier ist, wie es geht:

const customFetch = (uri, options) => {
  const { body, ...newOptions } = options;
  const queryString = objectToQuery(JSON.parse(body));
  requestedString = uri + queryString;
  return fetch(requestedString, newOptions);
};
const link = createHttpLink({
  uri: "data",
  fetchOptions: { method: "GET" },
  fetch: customFetch
});

@jbaxleyiii das sieht toll aus! Nur neugierig, woher objectToQuery kommt? Gibt es dafür ein util auf npm? Ich stelle mir vor, es wäre ziemlich einfach, bei Bedarf einfach Ihre eigenen zu rollen - im Grunde ordnen Sie Object.keys zu

escapeUriComponnt(`${k}=${obj[k]}`).join("&");

oder etwas ähnliches

https://www.apollographql.com/docs/link/links/http.html#Sending -GET-requests-custom-fetching

@arackaf siehe Kommentar:

// turn the object into a query string, try object-to-querystring package

https://github.com/Cyberlane/object-to-querystring

@jbaxleyiii es funktioniert! Es ist wunderbar!

Ich habe nur ein Problem.

Der erstellte Abfragestring:

http://localhost/graphql?operationName=AllPlayersQuery&variables=%5Bobject%20Object%5D&query=query%20All...

enthält dies: variables=%5Bobject%20Object%5D was ein Problem ist.

Wie kann man das beheben?

Das sieht aus wie die Standard-URI-Serialisierung - glaube nicht, dass Sie es vermeiden können - warum ist das ein Problem?

Standard-URI? Dies: %5Bobject%20Object%5D ?

encodeURIComponent('books(title:"Hello World"){Book{title}}')

books(title%3A%22Hello%20World%22)%7BBook%7Btitle%7D%7D

Meine Abfrage in Apollo lautet:

query AllPlayers {
  players {
    id
    name
    surname
}

und so habe ich das Problem mit [Object object] Variablen leer mit dem von @jbaxleyiii geposteten Code.

Hier ist eine Barebones React App (erstellt mit create-react-app), die über GET abgerufen wird und funktioniert - siehe index.js : https://github.com/usefulio/example-graphql-via-get-react-app

@johnunclesam variables wird offensichtlich vor der Codierung nicht serialisiert. Ich habe einfach meine benutzerdefinierte Abrufmethode (aus dem Beispiel-Repository erhalten) angepasst, indem ich ein bedingtes JSON.stringify hinzugefügt habe:

const customFetch = (uri, options) => {
  const {body, ...newOptions} = options;
  const parsedBody = JSON.parse(body);
  const command = omitBy(parsedBody, isEmpty);

  if (command.variables) {
    command.variables = JSON.stringify(command.variables);
  }

  const requestedString = uri + '?' + queryString.stringify(command);

  return fetch(requestedString, newOptions);
};

Wofür wird also useGETForQueries verwendet? Warum ist der benutzerdefinierte Abruf nicht integriert, wenn useGETForQueries=true ?
Wie unterscheide ich Abfrage und Mutation? Ich möchte GET nur für Abfragen (für DNS-Cache) verwenden.

Dies ist ein altes Problem, das älter als useGETForQueries ist und etwas hinzugefügt wurde, nachdem dies von https://github.com/apollographql/apollo-link/pull/510 behoben wurde

ähm, useGETForQueries scheint nicht zu funktionieren.

Speziell in dieser Zeile scheint es einen Fehler zu geben:

https://github.com/apollographql/apollo-link/blob/f94b1c6b984619ec1ef68cca3224be788ea140e4/packages/apollo-link-http/src/httpLink.ts#L41

let {
    uri = '/graphql',
    // use default global fetch if nothing passed in
    fetch: fetcher,
    includeExtensions,
    useGETForQueries,
    ...requestOptions
  } = linkOptions;

sollte etwa so sein:

let {
    uri = '/graphql',
    // use default global fetch if nothing passed in
    fetch: fetcher,
    includeExtensions,
    fetchOptions,
    ...requestOptions
  } = linkOptions;

let {
  useGETForQueries
} = fetchOptions;

Was bringt dich dazu das zu sagen? Wie rufst du createHttpLink ?

Meine obige Beobachtung stammte vom schrittweisen Durchlaufen des Codes mit einem Debugger, aber ich müsste es noch einmal tun, um es zu reproduzieren.

Der Code, auf den wir uns letztendlich festgelegt haben, ist dieser:

import omitBy from 'lodash.omitby';
import isEmpty from 'lodash.isempty';

const graphQLUrl = 'http://the.server.com/graphql';

const customFetch = (uri, options) => {
  const { body, credentials, headers, ...newOptions } = options;
  let fetchUri = uri;
  if (body) {
    const parsedBody = JSON.parse(body);
    const command = omitBy(parsedBody, isEmpty);
    fetchUri = uri + "?" + queryString.stringify(command);
  }
  return fetch(fetchUri, newOptions);
};

const link = createHttpLink({
  uri: graphQLUrl,
  fetchOptions: { method: "GET" },
  fetch: customFetch
});

Ich denke, meine Frage ist, wenn Sie useGETForQueries innerhalb von fetchOptions statt direkt in createHttpLink , dann wäre dies das Verhalten, das Sie beobachten würden, aber es wäre auch nicht so wie die API funktioniert. Ich würde vorschlagen, es noch einmal zu versuchen!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

j3ddesign picture j3ddesign  ·  3Kommentare

techyrajeev picture techyrajeev  ·  3Kommentare

tim-soft picture tim-soft  ·  4Kommentare

NicholasLYang picture NicholasLYang  ·  4Kommentare

valerybugakov picture valerybugakov  ·  5Kommentare