<p>apollo-link-http ne respecte pas une substitution de méthode GET</p>

Créé le 12 nov. 2017  ·  20Commentaires  ·  Source: apollographql/apollo-link

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 },
})
enhancement

Commentaire le plus utile

@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
});

Tous les 20 commentaires

@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

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

@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 :

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;

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 !

Cette page vous a été utile?
0 / 5 - 0 notes