将内容导入到 react-native答案

【问题标题】：Import contentful in to react-native将内容导入到 react-native
【发布时间】：2017-02-19 01:40:51
【问题描述】：

我对在我的项目中使用 contentful 感到非常兴奋，但我无法让 JS 库在 react-native 项目中工作。

我收到以下错误：

我尝试了以下方法：

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

您可以通过转到this repo 并按照我提供的步骤来重现该错误。

我们将不胜感激。

【问题讨论】：

标签： node.js reactjs react-native node-modules contentful

【解决方案1】：

我正在维护 Contentful sdk。我整理了一个简单的例子展示了如何在 React Native 中使用 SDK，你可以查看它here 它基本上是从我们的示例空间之一获取项目列表，并在 ListView.Check indes.ios.js 中显示名称。看起来您机器中的缓存有问题。无论如何，我希望这会有所帮助。如果您有更多问题，请随时在我们的 github page 中创建问题

[更新]

您现在可以将 SDK 中使用的 axios 实例配置为使用不同的适配器。你可以在调用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)
  }

最好的，

哈立德

【讨论】：

嘿，Khaled -- 似乎内容 sdk 不再适用于 react native，因为它使用了被 expo 拒绝的 Node 模块。
这个项目还有机会维护吗？如果是这样，您可以验证它是否对您有效？回购没有方向，目前不为我构建。事实上，我还没有找到另一个在任何地方使用 Contentful 的 RN 项目。谢谢
@Deroude：你有没有找到一种方法在 react-native 中使用它，我现在正在使用 3.6.4，它与 react-native 一起使用，但最新版本的 contentful 在我们运行时存在依赖性问题反应原生项目。
@KhaledGarbaya：您能否确认最新版本的 contentful 是否与 react-native 一起使用？
您是否使用了我提供的解决方案，但仍然无法正常工作。 ?

【解决方案2】：

我已经尝试了所有选项，但使用 Contentful SDK 永远无法正常工作。

但是，您可以通过 REST 获取它并使用来自 contentful 库的类型转换响应。

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;

【讨论】：

【解决方案3】：

我认为将 Contentful API 与 React Native 结合使用的最佳方式是使用 Apollo 客户端和 graphQL 包。我也解决了同样的问题并完成了它。

安装 Apollo 客户端和 GraphQL npm 包

npm install @apollo/client graphql

安装 react-native 异步存储来存储缓存

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

安装apollo缓存持久化缓存

npm install apollo3-cache-persist

可以阅读apollographql官方文档实现

在app.tsx/.js文件中创建ApolloClient

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}`,
  },
});

将所有组件包装在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;

导入gql并使用Query获取数据

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

现在，编写 GraphQL 查询

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

使用 useQuery 函数获取数据

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

这就是从Contentful 中的React Native App 中获取数据的全部内容。要详细阅读本文，请查看this post

【讨论】：