标签: apollo

我正在尝试通过单击按钮将新数据提交到本地 graphQL API，但出现错误：错误错误：未捕获（承诺中）：错误：网络错误：http://localhost:4000/的 Http 失败响应graphql：400 错误请求。

这个想法是，当您按下按钮时，就会提交新数据

  <button type="submit" (click)="onSubmit()" [disabled]="!personForm.valid" id="buttonSubmit" mat-raised-button color="accent"class="floated">Send</button>

onSubmit 函数调用突变

  onSubmit() 
  {
    let id = 5;
    let vorname = 'user';
    let name =  'name';
    let email =  'testt@hotmail.com';
    let status =  'true';
    let activity =  'Office';

    this.apollo.mutate<CreateUserMutationResponse>({
      mutation: CREATE_USER_MUTATION,
      variables: {
        id: id,
        vorname: vorname,
        name: name,
        email: email,
        status: status,
        activity: activity
      }
    }).subscribe((response) => {

    });

    console.log('submitted');

  }

我的 types.ts 中的突变看起来像这样

export const CREATE_USER_MUTATION = gql`
  mutation CreateUserMutation($id: ID!, $vorname: …

我目前正在构建一个 Vue / Nuxt 应用程序，并结合修改后的 Saleor 安装来在线销售产品。

当我们从现有系统迁移时，我们需要能够处理从旧网站 URL 到新网站 URL 的 301 重定向。

我修改了 API 以响应以下 GraphQL 查询。

export const CHECK_REDIRECTS_QUERY = gql`
  query Redirect($oldPath: String) {
    redirect(oldPath: $oldPath) {
      oldPath
      newPath
    }
  }
`

根据此建议，我在 ~/serverMiddleware/redirect.js 文件中创建了以下代码

import { CHECK_REDIRECTS_QUERY } from '~/graphql/navigation/queries'

export default function(req, res, next) {
  console.log('redirects middleware')
  // context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
  this.$apollo
    .query({
      query: CHECK_REDIRECTS_QUERY,
      variables: {
        oldPath: '/test/11/old/'
      }
    })
    .then(({ data }) => {
      if (data.redirect.newUrl …

我阅读了有关与缓存数据交互的文档，虽然我了解如何cacheRedirects工作，但我有点困惑为什么首先需要它。这就是我问另一个问题的部分原因：Apollo 客户端是否缓存 React 中的嵌套对象？

我们知道数据很可能已经在客户端缓存中，但由于它是通过不同的查询请求的，Apollo 客户端并不知道这一点。

这是为什么？

为了清楚起见，复制粘贴文档中的示例：

query ListView {
  books {
    id
    title
    abstract
  }
}

query DetailView {
  book(id: $id) {
    id
    title
    abstract
  }
}

我对 NextJS 和 Typescript 相当陌生，并且我\xe2\x80\x99m 实现了无头 CMS Strapi，但在使用 Apollo 时遇到了问题。我整个周末都在谷歌上搜索xe2x80x99，试图更好地理解这个问题。我希望有人能在这里帮助我。

错误

在我的中收到以下错误_app.tsx

Property \'apollo\' does not exist on type \'AppPropsType<Router, {}>\'.\n

我的下面的函数发生了错误MyApp。

我的_app.tsx

import * as React from \'react\'\nimport { AppProps } from \'next/app\'\nimport { ApolloProvider } from \'@apollo/react-hooks\'\nimport withData from \'../../utils/apollo\'\n\nimport \'circular-std\'\nimport \'react-multi-carousel/lib/styles.css\'\nimport \'../scss/styles.scss\'\n\nfunction MyApp({ Component, pageProps, apollo }: AppProps) {\n  return (\n    <ApolloProvider client={apollo}>\n      <Component {...pageProps} />\n    </ApolloProvider>\n  )\n}\n\nexport default withData(MyApp)\n

相应的Strapi 设置教程位于前端设置第 3 部分。 …

我正在尝试构建一个useSubscription使用onSubscriptionData.

我看过Apollo 文档，但还没有例子。

例如：

const { loading, error, data } = useSubscription(
    INCOMING_MESSAGES_SUBSCRIPTION_QUERY,
    {
        variables: {"localUserId": Meteor.userId()},
        onSubscriptionData: myFunctionThatRunsWhenSubscriptionDataArrives
    }
);

这还不可能是正确的，因为它不包括OnSubscriptionDataOptions<TData>Apollo 文档中提到的 。

构建useSubscription使用的钩子的正确方法是什么onSubscriptionData？

我正在尝试使用 GraphQL（Apollo 服务器）查询单个 MongoDB 文档 ( trivia)，但其中一个文档字段遇到问题。

LightningRoundQuestion.answer并且PictureRoundPicture.answer应该返回一个String，并且MultipleChoiceRoundQuestion.answer应该返回一个Int。查看架构：

schema

const typeDefs = gql`
  # ROOT TYPES ==================================================
  type Query {
    trivia(_id: String!): Trivia
  }

  # INTERFACES ==================================================
  interface Round {
    type: String!
    theme: String!
    pointValue: Int!
  }

  type LightningRound implements Round {
    type: String!
    theme: String!
    pointValue: Int!
    questions: [LightningRoundQuestion]
  }

  type MultipleChoiceRound implements Round {
    type: String!
    theme: String!
    pointValue: Int!
    questions: [MultipleChoiceRoundQuestion]
  }

  type PictureRound implements Round { …

我有一个带有 GraphQL 服务器的 React Native 项目。我正在使用 Apollo Client 从我的 API 获取数据。我创建了这个简单的组件，它从路由参数中获取注册所需的所有数据（形成逐步注册），并进行突变以创建新商店。

export default function AuthRegisterStore({ navigation, route }) {
  const [
    register,
    { loading: validating, error: validationError, data: returnData },
  ] = useMutation(REGISTER, { onError: (e) => Alert.alert(String(e)) });

  const handleRegistration = () => {
    register({
      variables: {
        username: route.params.username,
        password: route.params.password,
        latitude: route.params.latitude,
        longitude: route.params.longitude,
      },
    });
  };

  handleRegistration()

  if (validating) {
    return <Loader />;
  }

  if (validationError) {
    return (
      <View style={styles.container}>
        <Text>Error</Text>
      </View>
    );
  }

  if (returnData) …

当我使用 @apollo/client 进行 graphql api 调用时出现以下错误

React Hook“useQuery”在函数“graphqlService”中调用，该函数既不是React函数组件，也不是自定义React Hook函数react-hooks/rules-of-hooks

索引文件：

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: "http://localhost:3008",
  cache: new InMemoryCache()
});

 ReactDOM.render(
      <ApolloProvider client={client}>
       <App/>
    </ApolloProvider>,       
        document.getElementById('root')
      );

功能组件文件：

import React from 'react';
import {  
  useQuery,
  gql
} from "@apollo/client";
import Schema from '../models/schema';

function graphqlService( params : any = {} ) {
  const query = Schema.getPanelData;
  const { data } = useQuery(query, {variables: params});

  if (data) return data;     
}

导出默认的graphqlService；

类组件文件： …

我是 Hooks 新手，并尝试更多地使用它们

当组件安装时，如何获取数据（使用 Apollo）？

我正在尝试在 useEffect 中使用 useQuery，到目前为止我的代码如下所示

const MyComponent = () => {
  const getME = () => {
      const { loading, error, data } = useQuery(ME);
      setMe(data.me) // useState hook
      console.log('query me: ', me);
  };

  useEffect(getME);
  return (<>
  ...
  </>)
}

但这给了我一个错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

编辑：这是查询

import { gql } from '@apollo/client';

export const …

因此，我通过在 Next.js 上实现 Apollo 客户端来研究 GraphQL，我从未实现过 GraphQL API 或使用过 Apollo，并且在构建和操作查询时遇到了一些问题。我想使用 SpaceX GraphQL 服务器创建一些静态页面，并使用 getStaticProps 和 getStaticPath 从 SpaceX 服务器获取前 10 个结果，从这些路由创建静态页面并获取每个 id 的发射详细信息。我的问题是，我无法使启动详细信息查询工作。服务器响应 400。由于结构正确，问题一定是在将变量传递给查询时出现的。

再说一遍，我从未实现过 Apollo 客户端，并且对 graphQL 有非常初级的了解，并且无法找到使用文档的问题。我的代码基于此示例，我刚刚删除了 useQuery Hook，以便我可以在 getStaticProps 内发出请求。 https://www.apollographql.com/docs/react/data/queries/

// [launchId].tsx
import { initializeApollo } from '../../lib/ApolloClient'


export const getStaticPaths: GetStaticPaths = async () => {
  const apolloClient = initializeApollo()
  const {
    data: { launchesPast }
  } = await apolloClient.query({
    query: gql`
      {
        launchesPast(limit: 10) {
          id
        }
      }
    `
  })
  const paths = launchesPast.map(element …