Fix Issue with "url.origin is not implemented" Error in React Native V6.4.4

[paulohenriqueav]

Problem Description

When using the encodeQueryString function in the React Native environment, we are encountering the error message: "url.origin is not implemented." It appears that this issue is related to the use of URLSearchParams, which is not fully supported in React Native.

Proposed Solution

To address this problem, I suggest refactoring the encodeQueryString function to manually construct the query string without relying on URLSearchParams. This will ensure compatibility with React Native as well as other JavaScript environments.

Here's a snippet of the proposed changes:

import type { Any, QueryParams } from '../types';

export const encodeQueryString = ({
  query,
  params = {},
  options = {},
}: {
  query: string;
  params?: QueryParams;
  options?: Any;
}) => {
  // We generally want tag at the start of the query string
  const { tag, ...opts } = options;
  let searchParams = '';

  // We're manually appending the 'tag' parameter if it exists
  if (tag) searchParams += `tag=${encodeURIComponent(tag)}&`;
  searchParams += `query=${encodeURIComponent(query)}`;

  // Iterate params, the keys are prefixed with `$` and their values JSON stringified
  for (const [key, value] of Object.entries(params)) {
    searchParams += `&$${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(value))}`;
  }
  // Options are passed as-is
  for (const [key, value] of Object.entries(opts)) {
    // Skip falsy values
    if (value) searchParams += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
  }

  return `?${searchParams}`;
};

[stipsan]

Confirmed fixed in v6.4.5:

npm i @sanity/client@latest

Here's how I tested it, using the official install instructions:

npx create-expo-app AwesomeProject

cd AwesomeProject
npm i @sanity/client@6.4.5-canary.4 --save-exact
npx expo start

The contents of my App.js

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View } from 'react-native'
import { useEffect, useState } from 'react'
import { createClient } from '@sanity/client'

const client = createClient({ projectId: 'your-project-id', dataset: 'your-dataset-name' })

export default function App() {
  const [error, setError] = useState(null)
  if (error) {
    throw error
  }
  const [count, setCount] = useState(null)
  useEffect(() => {
    client.fetch('count(*)').then(setCount).catch(setError)
  }, [])

  return (
    <View style={styles.container}>
      <Text>
        {count === null ? 'Loading...' : `There are ${count} documents.`}
      </Text>
      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

And success!

[github-actions]

🎉 This issue has been resolved in version 6.4.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀