Import contentful in to react-native

Question

I am extremely excited about using contentful for my project, but I can't get the JS library to work in a react-native project.

I get the following error:

I have tried the following approaches:

import contentful from 'contentful'; 
// or
var contentful = require('contentful');

You can reproduce the bug by going to this repo and following the steps I have provided.

Help would be greatly appreciated.

Answer 1

I am maintaining the Contentful sdk. I've put together a simple example that shows how to use the SDK in React Native, you can check it here It is basically getting a list of items from one of our example spaces and display the names in a ListView.Check indes.ios.js. It looks like there is something wrong with the caching in your machine or so. Anyway I hope this helps.If you have more problems please feel free to create issues in our github page

[UPDATE]

you can now configure the axios instance used in the SDK to use a different adapter. You can pass that when calling createClient

adapter: config => {
    config.adapter = null // this is important if it is passing to another axios instance
    // an http client combatible with React Native
    return fetch(config)
  }

Best,

Khaled

Answer 2

I've tried every option and it will never work using the Contentful SDK.

However, you can get it with REST and transform the response using the types from the contentful lib.

import axios from 'axios';
import {EntryCollection} from 'contentful';

import Env from '../Env';

const contentfulApi = 'https://cdn.contentful.com';

/**
 * Default locale used in contentful calls
 *
 * @see {@link getContentfulEntries}
 * @constant
 */
export const ContentfulLocale = 'sv';

/**
 * @typedef ContentfulProps
 * @param locale optional locale to use. Default is {@link ContentfulLocale}
 * @param entryType content type in contentful model
 */
type ContentfulProps = {
  entryType: string;
  locale?: string;
};
/**
 * Get entries from Contentful content API
 * @param props See {@link ContentfulProps}
 */
export const getContentfulEntries = async <T>(
  props: ContentfulProps,
): Promise<EntryCollection<T>> => {
  const client = axios.create({
    baseURL: `${contentfulApi}/spaces/${Env.CONTENTFUL_SPACEID}/environments/master/entries?`,
    timeout: 1000,
    headers: {Authorization: `Bearer ${Env.CONTENTFUL_TOKEN}`},
  });

  const result = await client.get<EntryCollection<T>>(
    '&content_type=' + props.entryType,
  );

  return result.data;
};

export default getContentfulEntries;

Answer 3

I think the best way to use Contentful APIs with React Native is to use Apollo client and graphQL packages. I worked around the same and get it done.

• Install Apollo client and GraphQL npm package

npm install @apollo/client graphql

• Install react-native async storage to store cache

npm install @react-native-async-storage/async-storage

• Install apollo cache persist to persist the cache

npm install apollo3-cache-persist

you can read apollographql official documents for implementation

• Create ApolloClient in the app.tsx/.js file

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache();

const client = new ApolloClient({
  uri: 'https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}',
  cache,
  credentials: 'same-origin',
  headers: {
    Authorization: `Bearer {CDA-Access-Token}`,
  },
});

• Wrap all components in ApolloProvider

const App = () => {
  const [loadingCache, setLoadingCache] = useState(true);

  useEffect(() => {
    persistCache({
      cache,
      storage: AsyncStorage,
    }).then(() => setLoadingCache(false));
  }, []);

  if (loadingCache) {
    return <Loader />;
  }

  return (
    <ApolloProvider client={client}>
      <SafeAreaView style={{flex: 1}}>
        <Posts />
      </SafeAreaView>
    </ApolloProvider>
  );
};
export default App;

• Import gql and useQuery to fetch data

import { gql, useQuery } from '@apollo/client';

• Now, write GraphQL query

const QUERY_COLLECTION = gql`
  {
    postsCollection {
      items {
        title
        author
        publishDate
        inshorts
        featuredImage {
          url
        }
      }
    }
  }
`;

• Fetch data using useQuery function

const { data, loading } = useQuery(QUERY_COLLECTION);

That's all to fetch data from Contentful in React Native App. To read this in detailed, have a look to this post