Блог

Я следую курсу Wes Bos advanced React — https://advancedreact.com /

Интерфейс курса находится в Nextjs с Javascript, но я пытаюсь сделать это в typescript.

Код для добавления ApolloClient выглядит так

 import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client';
import { onError } from '@apollo/link-error';
import { getDataFromTree } from '@apollo/client/react/ssr';
import { createUploadLink } from 'apollo-upload-client';
import withApollo from 'next-with-apollo';
import { endpoint, prodEndpoint } from '../config';

const createClient = ({ headers, initialState}:any) => {
  return new ApolloClient({
    link: ApolloLink.from([
      onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
          graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
            )
          );
        if (networkError)
          console.log(
            `[Network error]: ${networkError}. Backend is unreachable. Is it running?`
          );
      }),
      // this uses apollo-link-http under the hood, so all the options here come from that package
      createUploadLink({
        uri: process.env.NODE_ENV === 'development' ? endpoint : prodEndpoint,
        fetchOptions: {
          credentials: 'include',
        },
        // pass the headers along from this request. This enables SSR with logged in state
        headers,
      }),
    ]),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            // TODO: We will add this together!
            // allProducts: paginationField(),
          },
        },
      },
    }).restore(initialState || {}),
  });
}

export default withApollo(createClient, { getDataFromTree });
 

Если я попытаюсь преобразовать его в typescript, я получаю следующую ошибку typescript на createUploadLink

Я импортировал типы для apollo-upload-client с @types/apollo-upload-client

     Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
  Type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
    Types of property 'split' are incompatible.
      Type '(test: (op: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/...' is not assignable to type '(test: (op: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/cdd/Desktop/mt-sick-...'.
        Types of parameters 'left' and 'left' are inccddompatible.
          Type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/types").RequestHandler' is not assignable to type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Reque...'.
            Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
              Type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
                Types of property 'split' are incompatible.
                  Type '(test: (op: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/cdd/Desktop/mt-sick-...' is not assignable to type '(test: (op: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/...'.
                    Types of parameters 'right' and 'right' are incompatible.
                      Type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Reque...' is not assignable to type 'import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/cdd/Desktop/mt-sick-fits/frontend/node_modules/@apollo/client/link/core/types").RequestHandler | undefined'.
                        Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler | undef