处理apollo客户端的问题

Question

我正在使用 aws amplify 制作一个完整的堆栈应用程序。 我正在使用应用程序同步 sdk，因为我在生成 aws amplify 客户端时遇到问题。但现在apollo客户端却出现了这个问题。 如果不生成客户端，我将无法使用 API 和 GraphQL 操作。

// src/AppSyncClient.ts

import React, { ReactNode } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import awsconfig from './aws-exports';

const httpLink = createHttpLink({
  uri: awsconfig.aws_appsync_graphqlEndpoint,
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'x-api-key': awsconfig.aws_appsync_apiKey,
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

const AppSyncProvider: React.FC<{ children: ReactNode }> = ({ children }) => (
  <ApolloProvider client={client}>  
    {children}
  </ApolloProvider> 
**// error : Parsing error: '>' expected.eslint 'ApolloProvider' refers to a value, but is being used as a type here. Did you mean 'typeof ApolloProvider'?ts(2749)
Parsing error: '>' expected.eslint 'ApolloProvider' refers to a value, but is being used as a type here. Did you mean 'typeof ApolloProvider'?ts(2749)
**
export default AppSyncProvider;

有人可以帮忙解决这个问题吗？

我已经编写了代码和我尝试过的内容。有什么不同的方法来处理生成客户端吗？

Answer 1

如果您想在 TypeScript 文件中使用 JSX 语法，您的文件需要以

.tsx

结尾。将其重命名为

AppSyncClient.tsx

。