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 },
})
@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
@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:
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!
Hilfreichster Kommentar
@szdc @Outlaw11A @arackaf hier ist, wie es geht: