Conformément à la doc , l'option fetchOptions
nous permet de définir la méthode de la requête sur GET
. Je m'attendrais à ce qu'après cela, la requête soit incluse en tant que paramètre de chaîne de requête plutôt que dans le corps de la requête ; Chrome renvoie une erreur si vous essayez de faire une requête GET avec un corps.
Résultat escompté :
Une chaîne de requête doit être construite si la méthode de requête est GET.
Résultat réel :
Le corps de la requête est utilisé.
Comment reproduire le problème :
client.query({
context: {
fetchOptions: {
method: 'GET',
},
},
query: QUERY,
variables: { query },
})
@szdc oui ça ne marche définitivement pas ! Seriez-vous prêt à l'ajouter ? Quelque chose comme https://github.com/apollographql/apollo-link/issues/257 peut également être une bonne solution pour transformer la demande avant son envoi ?
cc @arackaf @outlaw11a @puttyman qui s'y intéressent tous ! Cela devrait être un petit changement à ajouter!
Je l'ajouterai si personne d'autre ne veut.
@szdc @arackaf alors il s'avère que c'est déjà possible ! Je vais pousser un test et des documents bientôt montrant comment cela peut être fait sans modifications internes
@szdc @Outlaw11A @arackaf voici comment procéder :
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 ça a l'air génial ! Juste curieux d'où vient objectToQuery ? Existe-t-il un utilitaire sur npm pour cela? J'imagine qu'il serait assez facile de simplement lancer le vôtre si nécessaire - essentiellement mapper Object.keys sur
escapeUriComponnt(`${k}=${obj[k]}`).join("&");
ou quelque chose de similaire
https://www.apollographql.com/docs/link/links/http.html#Sending -GET-requests-custom-fetching
@arackaf voir le commentaire :
// turn the object into a query string, try object-to-querystring package
@jbaxleyiii ça marche ! C'est incroyable!
J'ai juste un problème.
La chaîne de requête créée :
http://localhost/graphql?operationName=AllPlayersQuery&variables=%5Bobject%20Object%5D&query=query%20All...
contient ceci : variables=%5Bobject%20Object%5D
ce qui est un problème.
Comment régler ceci?
Cela ressemble à une sérialisation d'URI standard - ne pensez pas que vous pouvez l'éviter - pourquoi est-ce un problème ?
URI standard ? Ceci : %5Bobject%20Object%5D
?
encodeURIComponent('books(title:"Hello World"){Book{title}}')
books(title%3A%22Hello%20World%22)%7BBook%7Btitle%7D%7D
Ma requête dans Apollo est :
query AllPlayers {
players {
id
name
surname
}
et j'ai donc le problème avec les variables [Object object]
vides avec le code posté par @jbaxleyiii.
Voici une application de réaction simple (créée à l'aide de create-react-app) qui récupère via GET et fonctionne - voir index.js
: https://github.com/usefulio/example-graphql-via-get-react-app
@johnunclesam évidemment variables
n'est pas sérialisé avant l'encodage. j'ai simplement ajusté ma méthode de récupération personnalisée (obtenue à partir de l'exemple de dépôt) en ajoutant un JSON.stringify
:
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);
};
Alors à quoi sert useGETForQueries
? Pourquoi la récupération personnalisée n'est pas intégrée lorsque useGETForQueries=true
?
Comment différencier requête et mutation ? Je veux seulement utiliser GET pour la requête (pour le cache DNS).
Il s'agit d'un ancien problème antérieur à useGETForQueries, qui a été ajouté un peu après sa résolution par https://github.com/apollographql/apollo-link/pull/510
euh, useGETForQueries semble ne pas fonctionner.
Plus précisément sur cette ligne, il semble y avoir un bug :
let {
uri = '/graphql',
// use default global fetch if nothing passed in
fetch: fetcher,
includeExtensions,
useGETForQueries,
...requestOptions
} = linkOptions;
devrait être quelque chose comme :
let {
uri = '/graphql',
// use default global fetch if nothing passed in
fetch: fetcher,
includeExtensions,
fetchOptions,
...requestOptions
} = linkOptions;
let {
useGETForQueries
} = fetchOptions;
Qu'est-ce qui te fait dire ça? Comment appelles-tu createHttpLink
?
Mon observation ci-dessus était de parcourir le code avec un débogueur, mais je devrais le refaire pour le reproduire.
Le code sur lequel nous avons fini par nous installer est le suivant :
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
});
Je suppose que ma question est, si vous passiez useGETForQueries
intérieur de fetchOptions
au lieu de directement à l'intérieur de createHttpLink
, alors ce serait le comportement que vous observeriez, mais ce ne serait pas non plus comment fonctionne l'API. Je suggère de recommencer !
Commentaire le plus utile
@szdc @Outlaw11A @arackaf voici comment procéder :