标签: apollo

我正在使用 apollo 设置服务器端渲染以在服务器端设置 graphql，但我现在不知道当我尝试在一个组件中使用查询时遇到这个问题时，这个错误出现在 cli 中：

(node:4440) UnhandledPromiseRejectionWarning: Error: Network error: Only absolute URLs are supported
at new ApolloError (G:\Project\node_modules\apollo-client\bundle.umd.js:59:32)
    at QueryManager.<anonymous> (G:\Project\node_modules\apollo-client\bundle.umd.js:13:49)

如果你现在发生了什么，请告诉我。

服务器代码

import React  from 'react'
import routes from '../../client/Routes'

import {StaticRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import {renderRoutes} from 'react-router-config'
import {AES} from 'crypto-js';
import {Helmet} from "react-helmet";
import serialize from 'serialize-javascript' ;

import  ApolloClient from 'apollo-client';
import { ApolloProvider, renderToStringWithData  } from 'react-apollo';
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloLink } from …

我有一个next应用程序。该应用本身（的代码pages，static等等）是在回购一个文件夹中。称为frontend。应用程序。本身通过expressrepo 中的另一个文件夹通过服务器提供服务。称为backend。

首先，我不确定将这两个分开是否是最佳实践，但我个人喜欢这样做。两个文件夹都有各自的package.json和package-lock.json文件。

我还ApolloServer通过/graphql端点在后端快速服务器上运行。应用程序。工作正常，直到我尝试实现带有反应钩子的组件。即如下所示提供react-spring的非常简单的示例：

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

我已将其从Appto重命名，SpringDemo并在页面组件中简单地调用它，如下所示：

function Home() {
  return (
    <div>
      <SpringDemo />
    </div>
  )
}

export default Home

通过文件夹中的express服务器为我的应用程序提供服务时，我 …

目前，当我使用 firebase 对用户进行身份验证时，我将他们的身份验证令牌存储在localStorage稍后用于连接到我的后端，如下所示：

const httpLink = new HttpLink({uri: 'http://localhost:9000/graphql'})

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization token to the headers
  const token = localStorage.getItem(AUTH_TOKEN) || null
  operation.setContext({
    headers: {
      authorization: token ? `Bearer ${token}` : ''
    }
  })
  return forward(operation)
})

const authAfterware = onError(({networkError}) => {
  if (networkError.statusCode === 401) AuthService.signout()
})

function createApolloClient() {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: authMiddleware.concat(authAfterware).concat(httpLink)
  })
}

我的问题是，一旦令牌过期，我就无法刷新它。所以我尝试使用以下内容为 apollo 设置授权令牌：

const httpLink = new …

预期结果：

MockedProvider 应该模拟我的 createPost 突变。

实际结果：

Error: No more mocked responses for the query: mutation...

如何重现问题：

我有一个非常简单的存储库。我还创建了一个带有示例提交的单独分支，它破坏了 apollo 模拟提供程序。

1）突变定义在这里：https : //github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/modules/blog/gql.js#L23

export const CREATE_POST = gql`
  mutation createPost($title: String!, $text: String!) {
    createPost(title: $title, text: $text) {
      id
      title
      text
    }
  }
`

2）假请求在这里：https : //github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/test/utils/gql-posts.js#L68

export const fakeCreatePostSuccess = {
  request: {
    query: CREATE_POST,
    variables: {
      title: 'Mock Title',
      text: 'Mock lorem ipsum text. And another paragraph.',
    }
  },
  result: {
    data: {
      createPost: {
        id: …

我正在尝试将 Apollo 添加到应用程序中。我将使用它来获取数据，并希望遵循最佳实践并使用新的 API（从 Apollo 2.5 开始）来存储本地 UI 状态。

我一直在查看这些文档，但它们的 UI 状态比我想要实现的更简单。

我想移植我一直在 Redux 应用程序中使用的模式，其中许多 UI 元素的值集中存储。在 Redux 中，我有一个 reducer 对象用于存储我的 UI 值，如下所示：

{
  dropdowns: {
    someDropdown: [{ index: 0, value: 'Selected Value' }]
  },
  checkboxes: {
    someCheckbox: true
  }
}

如在，不同类型的元素被表示为对象，其中每个键是 UI 元素的唯一 ID，值根据元素类型而变化。

我也对上述的扁平化版本持开放态度，其中没有按 UI 元素类型划分的子类别。

我还有一个单独的 reducer 存储一些 UI 元素的状态，例如：

{
  openDropdownId: 'someDropdown',
  openModalId: null
}

至关重要的是，这些数据似乎包括其键不可预测的对象。我既不确定如何使用此类型输入gql，也不确定如何有效地获取此数据（请参阅问题底部）。

我试过用 Apollo Client 重现这个，但遇到了很多错误。这是我的客户端设置：

例如，对于下拉菜单，其想法是在states这里存储 open/closed state ，而values存储有关所选值的信息。

import { …

遵循有关 dataSources的Apollo Server 文档，人们会假设在 GraphQL 解析器中访问数据的最佳方式是通过dataSources服务器配置上的选项。

但是，我正在开发的应用程序的要求会导致许多不同的数据源类（...在下面的handler.ts文件中被截断，但现在大约有 10 个，将来还会有更多）。这意味着每个数据源类都将针对服务器收到的每个查询/变异进行实例化，我认为如果我有足够的数据源类，这最终可能会导致一些延迟。

我正在考虑不使用该dataSources选项，而是根据需要通过使用解析器上下文来调用initialize()ApolloRESTDataSource类上的方法（下面粘贴的示例解析器方法）来实例化每个数据源类，这似乎为dataSources配置选项所做的数据源类。

我很好奇：

• 使用dataSources我不知道的选项有什么好处/坏处吗？
• 为什么 Apollo 文档会鼓励您为每个请求实例化所有数据源类？

提前感谢您的任何见解！

handler.ts 中的服务器配置：

const server = new ApolloServer({
  typeDefs,
  resolvers,
  introspection: true,
  playground: true,
  dataSources: (): IDataSources => {
    return {
      entity: new Entity(),
      notes: new Notes(), // this could be removed if "new" resolver method is used
      ... // like 8 more data …

套餐： apollo-server-express

版本： v2.6.0

问题： CORS 设置未生效。

向 Apollo 报告？：是的，第 3058 期

描述：从我们的 React 客户端，我们开始发送apollographql-client-name和apollographql-client-version标头，以在 Apollo Engine 中更好地了解客户端。

Access to fetch at 'https://something.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field apollographql-client-name is not allowed by Access-Control-Allow-Headers in preflight response.

我们收到上述CORS错误。我们cors通过传递cors: true. 出于某种原因，这种变化没有任何区别。我们继续收到上述错误。

const server: ApolloServer = new ApolloServer({
...
...
});

const app: Application = express();

server.applyMiddleware({
   app,
   cors: true, …

您好，我正在尝试将 Auth0 的 spa 示例与 react 一起使用，我正在使用 useAuth0 钩子，我也在使用 Apollo 客户端进行查询，我需要获取令牌并将其设置在请求中，但是我没有t 能够设置它。

如果有人能指出我正确的方向，我将不胜感激。

我试图在查询/变异组件中使用上下文属性，但我无法弄清楚，也找不到有关如何使用它的信息。

我完全不熟悉在 Vue 应用程序中使用 Apollo 和 GraphQL 进行开发，并且已经被一个小问题困住了一段时间。

我不断收到错误消息：结果中缺少客户端属性

我可以看到请求在“网络”选项卡中返回数据，因此当它失败时，它似乎与查询不同，但无法弄清楚它是什么。

目前我在做这个查询：MyQuery.js

import gql from 'graphql-tag';

export const allClientsQuery = gql`
query clients {
    client: client {
        id
        name,
        subDomain,
        color,
        logo
    }
}
`;

在我的 Vue 组件中：

<template>
<div id="app">
<v-app>
  <template v-if="loading > 0">
    Loading
  </template>
  <template v-else>
    Output data: {{clients}}
  </template>
</v-app>

<script>
import {allClientsQuery} from './graphql/queries/Clients';
import {VApp} from 'vuetify/lib';

export default {
    data() {
        return {
            loading: 0,
            clients: []
        };
    },
    components: {
        VApp
    }, …

我正在做一个关于 graphql 查询的演示项目。遵循所有必需的步骤并从我在 graphcool 上的虚拟 graphql 服务器下载 schema.json。但是，当我编写包含 graphql 查询的 .graphql 文件时，android studio 向我显示了这些字段的错误。即使在我成功构建项目之后，错误仍然存​​在。我有一个虚拟的 graphql 服务器，它的类型为 Employee 和 5 个字段：姓名、ID、身高、年龄和工作。

我尝试制作一个新项目并重新编写所有代码。我试过重建和清理我的项目等。我已经重新下载了 schema.json 文件并尝试删除和重写 .graphql 文件。然而，错误仍然被抛出。

query getAllEmployeeDetails{
    allEmployees{
        name
        id
        height
        age
        work
    }
}

这是我的 .graphql 文件。Android Studio 会在所有 5 个字段上引发错误，也会在“allEmployees”上引发错误。

graphql后端对应的查询是：

query{
  allEmployees{
    name
    id
    height
    age
    work
  }
}

这工作正常。

预期结果是 android studio 不应该在字段上抛出错误。