导入 contentful 到 react-native

Question

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

我收到以下错误：

我尝试了以下方法：

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

您可以转至 this repo 并按照我提供的步骤重现错误。

将不胜感激。

Answer 1

我正在维护 Contentful SDK。我整理了一个简单的例子展示了如何在 React Native 中使用 SDK，你可以查看 here 它基本上是从我们的示例空间之一获取项目列表，并在 ListView.Check indes.ios.js 中显示名称。看起来你的机器中的缓存有问题。无论如何，我希望这个 helps.If 你有更多问题请随时在我们的 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)
  }

最佳，

哈立德

Answer 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;

Answer 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 cache persist来持久化缓存

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

导入 contentful 到 react-native

Import contentful in to react-native

node.js

node-modules

reactjs

contentful

react-native