标签: graphql

QueryRenderer在Relay Modern中的作用?

所以,首先是一些背景知识.我是一名原生的iOS/Android开发人员,现在正在开始我的第一个React Native项目.它带来了Javascript的所有好处和痛苦,但到目前为止我非常喜欢它:-)我还决定第一次尝试使用GraphQL.

作为一般的React环境的新手,我也没有任何关于Relay的先验知识,但是在我的创业社区的朋友和我的web-dev同事的推荐下选择了它.我也被警告过一个有点陡峭的学习曲线,但无论如何我决定继续 - 我已经在与JS和一个新的移动平台的0.xx版本进行一场艰苦的战斗,所以到底是什么,对吧?:-)我设法正确地设置了我的项目并用一个整体通过我的GQL服务器QueryRenderer,这是一个很大的安慰:-)

所以,关于问题

我很难搞清楚容器/组件的关系,以及一般的容器组成.阅读关于作文的文档有所帮助,但我仍然怀疑作文的作用QueryRenderer

  • QueryRenderer据说文档是每个中继树的根容器.这是否意味着QueryRenderer我们的应用程序中应该有一个root用户?或者在每个导航路径的根目录(即我们的应用程序中的选项卡)?或者仅针对每个容器组件(与表示/哑/纯组件相反,React明智)?请注意,我不是在寻找意见,而是寻求最佳实践:-)
  • 一个FragmentContainer(或任何其他容器)可以在没有QueryRenderer"父"组件的情况下工作吗?
  • 如何QueryRenderer链接到子容器?它是否获取子容器所需的所有数据的总和,然后从缓存中读取子容器,或者?如果是这样,我误解了Relay的优点 - 我们认为每个组件都可以独立于其他所有组件检索数据,并且每个组件都不了解其他组件(包括父/子组件)的数据要求).我认为这个假设也让我感到困惑QueryRenderer,并且需要一个"Root"容器.
  • 如果QueryRenderer是中继树的"父"/"根"中继容器,那么它如何根据它的请求呈现视图组件呢?为什么它必须有一个请求?何时以及我们应该使用QueryRenderer什么?

任何帮助深表感谢 :-)

relay reactjs graphql

17
推荐指数
2
解决办法
1917
查看次数

使用GraphQL(v4 API)在GitHub中搜索代码

我正在使用GitHub的GraphQL API来搜索包含特定单词的文件/代码.一个简单的(人为的)搜索示例,在这种情况下,在"食谱"(回购)中为"someuser"(回购的所有者)找到文件中的"牛肉"一词如下所示:

{
  search(query: "beef repo:someuser/recipes", type: REPOSITORY, first: 10) {
    repositoryCount
    edges {
      node {
        ... on Repository {
          name
        }
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

我在GitHub的GraphQL Explorer(https://developer.github.com/v4/explorer/)中尝试了这个并且从搜索中得到零结果是不正确的,因为我可以确认这个词(上例中的"牛肉")是在repo中的文件中:

{
  "data": {
    "search": {
      "repositoryCount": 0,
      "edges": []
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

当我通过curl使用GitHub的REST API(v3)尝试这个时,我肯定会得到结果:

curl --header 'Accept: application/vnd.github.v3.raw' https://api.github.com/search/code?q=beef+repo:someuser/recipes
Run Code Online (Sandbox Code Playgroud)

...所以我知道查询(REST v3 API)是有效的,我的理解是GraphQL(v4)API中的查询字符串与REST(v3)API的查询字符串相同.

我的问题是:

  1. 我是否错误地使用了GitHub GraphQL(v4)API,或者我是否未正确指定查询字符串,或者我是否尝试使用尚不支持的功能?
  2. 有没有一个如何做到这一点的例子,有人可以提供(或链接)说明如何搜索特定单词的代码?

github github-api graphql

17
推荐指数
1
解决办法
1516
查看次数

graphql中的AST是什么?

graphql中的AST是什么?我正在使用graphql-js.它对任何事情有何帮助?

任何文档中的任何内容似乎都不能解释AST是什么

graphql graphql-js

17
推荐指数
1
解决办法
5862
查看次数

使用Gatsby.js中的Markdown Remark自定义frontmatter变量

我正在使用Gatsbyjs和NetlifyCMS构建一个网站.我已经开始使用这个启动器https://github.com/AustinGreen/gatsby-starter-netlify-cms,我现在正在尝试自定义它.

我想在markdown文件的frontmatter中使用自定义变量,如下所示:

---
templateKey: mirror
nazev: ?ernobílá
title: Black and White
cena: '2700'
price: '108'
thumbnail: /img/img_1659.jpeg
---
Run Code Online (Sandbox Code Playgroud)

我想用GraphQL访问这些数据.我使用gatsby-source-filesystem和gatsby-transform-remark.这是我的查询:

  {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          templateKey
          nazev
          title
          cena
          price
        }
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

我无法让GraphQL读取我自己的变量,它只识别titletemplateKey(那些已经在启动器中使用过的).我收到此错误:

{
  "errors": [
    {
      "message": "Cannot query field \"nazev\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": 7,
          "column": 11
        }
      ]
    },
    {
      "message": "Cannot query field \"cena\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": …
Run Code Online (Sandbox Code Playgroud)

markdown yaml-front-matter graphql gatsby remarkjs

17
推荐指数
1
解决办法
3976
查看次数

GraphQL和SPARQL有什么区别?

我现在正在对语义Web和代表个人与组织之间关系的复杂数据模型进行大量研究.我知道一些语义本体,虽然如果不制作图表,我从未理解它的用途.

我在大学维基上看到,质疑本体的语言是SPARQL(告诉我,如果我错了).

但最近我看到一家创建了语义本体的公司把它放在GraphQL的形式中,我不知道(https://diffuseur.datatourisme.gouv.fr/graphql/voyager/).

在我看来,语义本体是为了更好地查找信息,例如制作聊天机器人(这是我想要做的),但是在这里他们将语义本体转换为API,是不是?要创建GraphQL,我应该首先构建一个语义本体吗?

你能不能向我解释一下这一切之间的区别,老实说这对我来说有点模糊.

semantic-web artificial-intelligence ontology sparql graphql

17
推荐指数
4
解决办法
4208
查看次数

使用makeRemoteExecutableSchema拼接安全订阅

我们已经实现了模式拼接,其中GraphQL服务器从两个远程服务器获取模式并将它们拼接在一起.当我们只使用Query和Mutations时,一切都运行正常,但现在我们有一个用例,我们甚至需要缝合订阅,远程模式已经通过它实现了auth.

我们很难搞清楚如何通过网关将connectionParams中收到的授权令牌从客户端传递到远程服务器.

这就是我们如何反省架构:

API网关代码:

const getLink = async(): Promise<ApolloLink> => {
const http = new HttpLink({uri: process.env.GRAPHQL_ENDPOINT, fetch:fetch})

const link = setContext((request, previousContext) => {
    if (previousContext
        && previousContext.graphqlContext
        && previousContext.graphqlContext.request
        && previousContext.graphqlContext.request.headers
        && previousContext.graphqlContext.request.headers.authorization) {
        const authorization = previousContext.graphqlContext.request.headers.authorization;
        return {
            headers: {
                authorization
            }
        }
    }
    else {
        return {};
    }
}).concat(http);

const wsLink: any = new WebSocketLink(new SubscriptionClient(process.env.REMOTE_GRAPHQL_WS_ENDPOINT, {
    reconnect: true,
    // There is no way to update connectionParams dynamically without resetting connection
    // connectionParams: () => …
Run Code Online (Sandbox Code Playgroud)

apollo graphql apollo-server graphql-subscriptions graphql-tools

17
推荐指数
1
解决办法
759
查看次数

如何在graphql查询过滤器中使用OR / AND或制作不区分大小写的过滤器?

就像帖子中的问题一样,我需要能够搜索 3 种可能的情况。我需要全部大写,或小写,或正常大小写。

如果这是不可能的,有没有办法做一个不区分大小写的过滤器?

  allMarkdownRemark(filter: { brand: { eq: $normalBrand } }) { //==> Need more here
        edges {
            node {
                webImages {
                    url
                }
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

我发现有些人这样做:

filter: { OR: [
  {brand: { eq: $normalBrand }}, 
  {brand: { eq: $normalBrand2 }}, 
  {brand: { eq: $normalBrand3 }}
]}
Run Code Online (Sandbox Code Playgroud)

但它对我不起作用

graphql gatsby

17
推荐指数
1
解决办法
1万
查看次数

apollo server 和 express-graphql 有什么区别

我想构建一个应用程序并推荐使用 GraphQl 作为 API,

我不确定选择哪个平台以及有什么区别。

apollo server vs express-graphql
Run Code Online (Sandbox Code Playgroud)

我也需要在项目中使用 TypeScript。任何好主意将不胜感激。

node.js graphql apollo-server

17
推荐指数
3
解决办法
1万
查看次数

与“ws:&lt;URL&gt;/_next/webpack-hmr”的 WebSocket 连接失败:在建立连接之前 WebSocket 已关闭

您好,我遇到了这个问题,我尝试在 nextjs 中使用 graphql 进行订阅,但是出现了问题,我不知道如何修复它。我遇到 websocket 错误 - “与 'ws:/_next/webpack-hmr' 的 WebSocket 连接失败:WebSocket 在建立连接之前已关闭。”

您可以在此处检查代码 - https://github.com/LoQeN00/messenger-2.0.git

错误

graphql 设置

reactjs graphql graphql-subscriptions next.js prisma

17
推荐指数
1
解决办法
3万
查看次数

graphQL 查询中的变量

编辑:现在有下面的工作代码

GraphiQL 版本

我有这个查询来获取gatsby-image

query getImages($fileName: String) {
  landscape: file(relativePath: {eq: $fileName}) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        base64
        tracedSVG
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
        originalImg
        originalName
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

然后这个查询变量:

{
  "fileName": "titanic.jpg"
}
Run Code Online (Sandbox Code Playgroud)

以上在GraphiQL 中工作正常。

盖茨比版本

现在我想在 Gatsby 中使用它,所以我有以下代码:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <Img fluid={data.landscape.childImageSharp.fluid} />
  </div>
)

export const query = (
  graphql` …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs graphql gatsby

16
推荐指数
2
解决办法
1万
查看次数