输入内容以响应本机

Question

我对在我的项目中使用内容非常兴奋，但是我无法让JS库在一个反应型的本地项目中工作。

我得到以下错误：

​

我尝试了以下方法：

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

您可以通过转到这个回购并按照我提供的步骤来重现这个bug。

我们将非常感谢您的帮助。

Answer 1

我正在维护内容丰富的sdk。我已经建立了一个简单的示例，展示了如何在React中使用SDK，您可以检查它这里 --基本上是从我们的示例空间中获取项目列表，并在ListView.Check indes.ios.js中显示名称。您的机器中的缓存似乎有问题。无论如何，我希望这个helps.If您有更多的问题，请随意在我们的github 页面中创建问题。

更新

现在可以将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将永远无法工作。

但是，您可以使用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

我认为使用的最佳方法是使用阿波罗客户端和graphQL包。我也做过同样的工作然后把它做好了。

• 安装阿波罗客户端和GraphQL npm软件包

npm install @apollo/client graphql

• 安装react本机异步存储以存储缓存。

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

• 安装阿波罗缓存持久化缓存

npm install apollo3-cache-persist

您可以阅读用于实现的载脂蛋白正式文档。

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

​

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和useQuery来获取数据

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获取数据的全部内容。要详细阅读这篇文章，请看一下这个职位