How to use qs - 10 common examples

async _onNavigationStateChange(webViewState) {
    const { url } = webViewState
    const { key } = this.state
    if (webViewState.title === 'Instagram' && webViewState.url === 'https://www.instagram.com/') {
      this.setState({ key: key + 1 })
    }
    if (url && url.startsWith(this.props.redirectUrl)) {
      const match = url.match(/(#|\?)(.*)/)
      const results = qs.parse(match[2])
      this.hide()
      if (results.access_token) {
        // Keeping this to keep it backwards compatible, but also returning raw results to account for future changes.
        this.props.onLoginSuccess(results.access_token, results)
      } else if (results.code) {

        //Fetching to get token with appId, appSecret and code
        let { code } = results
        code = code.split('#_').join('')
        const { appId, appSecret, redirectUrl, scopes } = this.props
        let headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
        let http = axios.create({ baseURL: 'https://api.instagram.com/oauth/access_token',  headers: headers  })
        let form = new FormData();
        form.append( 'app_id', appId );
        form.append( 'app_secret', appSecret );
        form.append( 'grant_type', 'authorization_code' );

handleEnvironmentQueryParam() {
        let queryString = this.props.location.search;
        queryString = queryString.replace(/^\?/, '');
        /* With QS version up we can directly use {ignoreQueryPrefix: true} option */
        const queryParams = qs.parse(queryString);
        const environmentName = queryParams.environment;

        if (!environmentName || this.environmentName === environmentName) {
            // no environment query param or the same environment
            return;
        }

        const environmentId = Utils.getEnvironmentID(this.state.environments, environmentName);
        if (environmentId === -1) {
            console.error('Invalid environment name in environment query parameter.');
            return;
        }

        const environment = this.state.environments[environmentId];
        Utils.setEnvironment(environment);
        this.environmentName = environmentName;

let parts = url.split('#');
  let hash = parts[1];
  let partsWithoutHash = parts[0].split('?');
  let queryString = partsWithoutHash[partsWithoutHash.length - 1];

  // Get query string (?hello=world)
  let parsedSearch = qs.parse(queryString);

  // Pull errorCode off of params
  let { errorCode } = parsedSearch;
  delete parsedSearch.errorCode;

  // Get hash (#abc=example)
  let parsedHash = {};
  if (parts[1]) {
    parsedHash = qs.parse(hash);
  }

  // Merge search and hash
  let params = {
    ...parsedSearch,
    ...parsedHash,
  };

  return {
    errorCode,
    params,
  };
}

Promise.resolve().then(() => {
      let search = window.location.search.slice(1)
      let params = qs.parse(search)
      Object.assign(params, plannedParams)

      params = sorted(params)
      let str = qs.stringify(params, { encode: false })

      // ignore unchanged transition
      if (str === search) return

      window.history.replaceState(null, '', str ? '?' + str : window.location.href.split('?')[0])
      plannedTimeout = null
      plannedParams = {}
    })
  }

if (options.method && /^POST|PUT|DELETE$/i.test(options.method)) {
    const params = options.body;
    if (options.headers['Content-Type'] === 'application/json') {
      options.body = JSON.stringify(params);
    } else if (options.headers['Content-Type'] === 'multipart/form-data') {
      delete options.headers['Content-Type'];
    } else {
      // 解决多层嵌套数据的问题
      options.body = stringify(params, { arrayFormat: 'brackets', skipNulls: true });
    }
  }

  // 处理get，默认get
  if ((options.method && /^GET$/i.test(options.method)) || options.method === undefined) {
    const params = options.params || options.body || {};
    url += `?${stringify(params, { arrayFormat: 'brackets', skipNulls: true })}`;
    // 解决某些浏览器下请求报错的问题 body not allowed for get or head requests
    options.body = undefined;
  }

  return fetch(url, options)
    .then((response) => {
      if (response.status === 200) {
        return response.json()
          .then((json) => {
            if (json.ret === '0') {
              return Promise.resolve(json.data);
            }
            return Promise.reject({
              status: response.status,
              ...json,
            });

// 处理hearder
  options.headers = options.headers || {};
  if (!options.headers['Content-Type']) {
    options.headers['Content-Type'] = 'application/json';
  }

  // 处理post
  if (options.method && /^POST|PUT|DELETE$/i.test(options.method)) {
    const params = options.body;
    if (options.headers['Content-Type'] === 'application/json') {
      options.body = JSON.stringify(params);
    } else if (options.headers['Content-Type'] === 'multipart/form-data') {
      delete options.headers['Content-Type'];
    } else {
      // 解决多层嵌套数据的问题
      options.body = stringify(params, { arrayFormat: 'brackets', skipNulls: true });
    }
  }

  // 处理get，默认get
  if ((options.method && /^GET$/i.test(options.method)) || options.method === undefined) {
    const params = options.params || options.body || {};
    url += `?${stringify(params, { arrayFormat: 'brackets', skipNulls: true })}`;
    // 解决某些浏览器下请求报错的问题 body not allowed for get or head requests
    options.body = undefined;
  }

  return fetch(url, options)
    .then((response) => {
      if (response.status === 200) {
        return response.json()
          .then((json) => {

/*
       * The error is not handled because the `this.$router.replace()` call is
       * only used to replace the current URL, no navigation is expected.
       * vue-router can not navigate to the same URL again and errors as of
       * version 3.1.0.
       *
       * See https://github.com/vuejs/vue-router/issues/2872#issuecomment-519073998
       */
      this.$router.replace({
        path: '/files',
        query: query
      }).catch(err => {}) // eslint-disable-line handle-callback-err

      return {
        queryString: qs.stringify(query, { addQueryPrefix: true }),
        sanitizedQueryString: qs.stringify(
          sanitizedQuery, { addQueryPrefix: true }
        )
      }
    },
    loadFiles: function (fetchNextPage) {

const makeRequestPath = () => {
      let url: string;
      if (__internal_hasExplicitBase) {
        url = composeUrl(base!, "", path || "");
      } else {
        url = composeUrl(base!, parentPath!, requestPath || path || "");
      }

      // We use ! because it's in defaultProps
      if (Object.keys(this.props.queryParams!).length) {
        url += `?${qs.stringify(this.props.queryParams)}`;
      }
      return url;
    };

export const toQueryString = (options = {}) =>
  /**
   * In the case of batched requests we want to explicitly _not_ sort the
   * params because the order matters to dataloader
   */
  // @ts-ignore
  options.batched
    ? stringify(options, {
        arrayFormat: "brackets",
      })
    : stringify(options, {
        arrayFormat: "brackets",
        sort: (a, b) => a.localeCompare(b),
      })
export const toKey = (path, options = {}) => `${path}?${toQueryString(options)}`

/*
       * The error is not handled because the `this.$router.replace()` call is
       * only used to replace the current URL, no navigation is expected.
       * vue-router can not navigate to the same URL again and errors as of
       * version 3.1.0.
       *
       * See https://github.com/vuejs/vue-router/issues/2872#issuecomment-519073998
       */
      this.$router.replace({
        path: '/tags',
        query: query
      }).catch(err => {}) // eslint-disable-line handle-callback-err

      return {
        queryString: qs.stringify(query, { addQueryPrefix: true }),
        sanitizedQueryString: qs.stringify(
          sanitizedQuery, { addQueryPrefix: true }
        )
      }
    },
    loadTags: function (fetchNextPage) {