标签: react-apollo

我是新来的与 graphql 反应。

我想通过网络接口将 .pdf 文件上传到服务器。

我需要做的就是使用 apollo 客户端编写一个 graphql 查询，该客户端将多部分表单数据发送到服务器。

我尝试在谷歌上搜索它，但没有找到任何合适的解决方案。

mutation createUser($user: myfile) {
    createData(myfile: $user) {
        id
        name
        email
    }  
}

我有我的项目设置来导入.graphql文件。这很好用。但我的问题是我不知道如何在一个定义查询.graphql文件，将其导入到与使用的组件react-apollo的<Query ...>组件。

在此示例中，作者使用gql以下代码在 JavaScript 变量中定义查询：

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;

      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select> …

我的问题：

我对 GraphQL 还很陌生，我正在使用 Apollo 服务器和客户端开发我的第一个全栈应用程序，这是一个简单的博客。

在客户端，我在两个不同的页面中使用相同的查询，但使用不同的变量。查询是通过 ID 或 slug 查询博客文章，具体取决于我使用的页面。所以结果是一样的，只是查询变量发生了变化。

当我在一个页面中使用查询时，我认为由于 Apollo 缓存，查询不会在第二页上运行。但事实并非如此。查询在第二个页面中再次运行，当然返回的结果与其他页面中的结果相同。

为什么 Apollo 在这种情况下不使用缓存？

这是我使用的代码：

在服务器端，我有一个非常基本的查询来从博客中获取文章，可以通过 ID 或 Slug 获取：

type Query {
  ...
  article(id: ID, slug: String): Article
  ...
}

在客户端，如果文章已发布，我会通过 slug 查询文章；如果文章仍是草稿，我会通过 ID 查询文章。

通过 slug 进行查询：

<Query
  query={article}
  variables={{ slug }}
  fetchPolicy="cache-and-network"
>
  {({ loading, error, data }) => {
    return (
      <Article
        loading={loading}
        article={data && data.article}
      />
    );
  }}
</Query>

通过ID查询是相同的，除了变量param使用ID：

<Query
  query={article}
  variables={{ id }}
>
  {({ loading, error, data }) => …

我创建了这个问题，以防有人对如何在 Apollo 中添加联合/多态类型感到好奇。希望这会让他们更容易。

在此示例中，我希望响应为 aWorksheet或ApiError

// typedefs.js
export default [`
  schema {
    query: Query
  }

  type Query {
    worksheet(id: String!): Worksheet | Error
  }

  type Worksheet {
    id: String!
    name String
  }

  type ApiError {
    code: String!
    message: String!
  }
`];

// resolvers.js
export default {
  Query: {
    worksheet(_, args, { loaders }) {
      return loaders.worksheet.get(args.id).catch(() => {
        // ApiError
        return {
          code: '1',
          message: 'test'
        }
      });
    }
  }
};

// Express Server 
import …

React与GraphQL clientslike 一起使用Apollo Client是个好主意吗？我可以使用react和 new实现相同的结果Context API。

基本上我可以使用GraphQL APIs usingaxios或任何其他类似的库。对于状态管理，我可以使用 react 的 new Context API，这非常简单。

axios.get('localhost://4000?qraphql').then((res)=>{

//do something with the response.
}) 

还是有什么优势可以搭配Apollo Client。如果Apollo client没有它，我可以实现同样的目标，为什么我真的要去。它将帮助我减少我的bundle尺寸。

我在 ReactJS 中使用 Apollo Client 与 GraphQL API 进行通信。我们使用 Firebase 身份验证和 JWT 来确保我们的 API 不会向公众公开私有数据，但问题是 firebase 令牌每隔一小时左右就会过期。

当用户登录并在请求标头上使用它时，我目前正在保存 IdToken localstorage 但是当令牌过期时，graphql 返回非授权错误。我还尝试在 apollo 的 createHttpLink 函数上使用 customfetch

const customFetch = async (uri, options) => {
    console.log(firebase.auth.currentUser)
    if (firebase.auth.currentUser) {
        const token = await firebase.auth.currentUser.getIdToken()
        localStorage.setItem('token', token)
        options.headers.authorization = token;
        return fetch(uri, options);
    }
    else {
        firebase.auth.onAuthStateChanged(async (user) => {
            if (user) {
                console.log('Inside on Auth')
                const token = await user.getIdToken()
                localStorage.setItem('token', token)
                options.headers.authorization = token;
                return fetch(uri, options);
            }
        }) …

我有一个带有 ApolloClient 和 Apollo-Link-Schema 的 React 应用程序。该应用程序在本地运行良好，但在我们的临时环境（使用 GOCD）中，我们收到以下错误：

Uncaught Error: Cannot use e "__Schema" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used …

我正在尝试使用 Postman 通过 Graphql 调用服务。从我的应用程序 (React) 中，我可以毫无问题地使用所有服务（因此，它们运行正常），但我想用 Postman 单独测试它们。

我正在使用 AppSync，这是我的配置：

const AppSyncConfig = {
  url: environments.configAws.graphql.aws_appsync_graphqlEndpoint,
  region: environments.configAws.graphql.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.API_KEY,
    apiKey: environments.configAws.graphql.aws_appsync_apiKey,
  }
};

环境变量是这样的：

graphql: {
    aws_project_region: "us-east-1",

    aws_appsync_graphqlEndpoint: "https://XXXXXXXXXXXXX.appsync-api.us-east-1.amazonaws.com/graphql",
    aws_appsync_region: "us-east-1",
    aws_appsync_authenticationType: "API_KEY",
    aws_appsync_apiKey: "da2-XXXXXXXXXXXX"
}

该应用程序使用它来进行查询：

const client = new AWSAppSyncClient(AppSyncConfig, {
  link: createAppSyncLink({ ...AppSyncConfig,
    resultsFetcherLink: ApolloLink.from([
      setContext((request, previousContext) => ({
        headers: { ...previousContext.headers,
          Authorization: localStorage.getItem('token') ? localStorage.getItem('token') : ''
        }
      })),
      createHttpLink({
        uri: AppSyncConfig.url
      })
    ])
  })
});

const data_configs = client.readQuery({ query: …

我正在努力理解如何最好地组织我的代码以在 React 中设置初始 useState()，同时使用 GraphQL 和 Apollo 引入数据。这是我的代码。如您所见，我想查看“数据”的一部分来设置初始状态，但是当我将 setSTate 移到加载和错误行下方时，出现以下错误：

React Hook "useState" 被有条件地调用。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks。您是否在提前返回后不小心调用了 React Hook？反应钩子/钩子规则

我应该如何更好地组织这个？我是否必须使用 Apollo 的状态管理库，因为我更喜欢使用 React useState hooks。

const GET_LATEST_POSTS = gql`
query {
"graphql query is in here"
}

...

const Slider = () => {

const { data, loading, error } = useQuery(GET_LATEST_POSTS)

if (loading) return 'Loading...'
if (error) return `Error! ${error.message}`

const [ currentMovie, setMovie ] = useState(data)
}

我有一个使用 Apollo Boost MockedProvider、Jest 和 React 测试库的工作测试，当我将返回的字段更改为 graphQL 时，fragment它停止工作。我错过了什么？

TicketGql.js

export default class TicketGql {
  static VIEW_FRAGMENT = gql`
    fragment ViewFragment on View {
      viewId
      versionId
      name
      description
      orderedColumns {
        columnId
        name
        descriptions {
          translationId
          lang
          description
        }
      }
    }
  `;

  static GET_TICKET_VIEW = gql`
    query getView($viewId: ID!) {
      view(viewId: $viewId) {
        viewId
        versionId
        name
        description
        orderedColumns {
          columnId
          name
          descriptions {
            translationId
            lang
            description
          }
        }
      }
    }
  `;
}

TicketGql.test.js

...
it('GET_TICKET_VIEW', async () => …